Show Entity task/note tabs (#1282)

* - show task tab
- tab bar

* - add notes tab

* - fixed unused style

* - add button
- fixed company edit note test

* - fixed merge & dropdown

* - added Tests
- refactored directory structure activities
- moved Task/Note Pages to corresponding modules
- fixed TabList

* lint

front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -37,7 +37,6 @@ export function useOpenCreateActivityDrawer() {
     entities?: ActivityTargetableEntity[],
   ) {
     const now = new Date().toISOString();
-
     return createActivityMutation({
       variables: {
         data: {

front/src/modules/activities/notes/components/NoteCard.tsx

@@ -0,0 +1,87 @@
+import styled from '@emotion/styled';
+
+import { ActivityRelationEditableField } from '@/activities/editable-fields/components/ActivityRelationEditableField';
+import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
+import { Activity, ActivityTarget } from '~/generated/graphql';
+
+const StyledCard = styled.div`
+  align-items: flex-start;
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  justify-content: space-between;
+`;
+
+const StyledCardDetailsContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: calc(100% - 45px);
+  justify-content: start;
+  padding: ${({ theme }) => theme.spacing(2)};
+  width: calc(100% - ${({ theme }) => theme.spacing(4)});
+`;
+
+const StyledNoteTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledCardContent = styled.div`
+  align-self: stretch;
+  color: ${({ theme }) => theme.font.color.secondary};
+  line-break: anywhere;
+  margin-top: ${({ theme }) => theme.spacing(2)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+`;
+
+const StyledFooter = styled.div`
+  align-items: center;
+  align-self: stretch;
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2)};
+  width: calc(100% - ${({ theme }) => theme.spacing(4)});
+`;
+
+export function NoteCard({
+  note,
+}: {
+  note: Pick<
+    Activity,
+    'id' | 'title' | 'body' | 'type' | 'completedAt' | 'dueAt'
+  > & {
+    activityTargets?: Array<Pick<ActivityTarget, 'id'>> | null;
+  };
+}) {
+  const openActivityRightDrawer = useOpenActivityRightDrawer();
+  const body = JSON.parse(note.body ?? '{}')[0]
+    ?.content.map((x: any) => x.text)
+    .join('\n');
+
+  return (
+    <StyledCard>
+      <StyledCardDetailsContainer
+        onClick={() => openActivityRightDrawer(note.id)}
+      >
+        <StyledNoteTitle>{note.title ?? 'Task Title'}</StyledNoteTitle>
+        <StyledCardContent>{body}</StyledCardContent>
+      </StyledCardDetailsContainer>
+      <StyledFooter>
+        <ActivityRelationEditableField activity={note} />
+      </StyledFooter>
+    </StyledCard>
+  );
+}

front/src/modules/activities/notes/components/NoteList.tsx

@@ -0,0 +1,70 @@
+import { ReactElement } from 'react';
+import styled from '@emotion/styled';
+
+import { NoteForList } from '../../types/NoteForList';
+
+import { NoteCard } from './NoteCard';
+
+type OwnProps = {
+  title: string;
+  notes: NoteForList[];
+  button?: ReactElement | false;
+};
+
+const StyledContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 8px 24px;
+`;
+
+const StyledTitleBar = styled.h3`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+  place-items: center;
+  width: 100%;
+`;
+
+const StyledTitle = styled.h3`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+const StyledCount = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledNoteContainer = styled.div`
+  display: grid;
+  gap: ${({ theme }) => theme.spacing(4)};
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  width: 100%;
+`;
+
+export function NoteList({ title, notes, button }: OwnProps) {
+  return (
+    <>
+      {notes && notes.length > 0 && (
+        <StyledContainer>
+          <StyledTitleBar>
+            <StyledTitle>
+              {title} <StyledCount>{notes.length}</StyledCount>
+            </StyledTitle>
+            {button}
+          </StyledTitleBar>
+          <StyledNoteContainer>
+            {notes.map((note) => (
+              <NoteCard key={note.id} note={note} />
+            ))}
+          </StyledNoteContainer>
+        </StyledContainer>
+      )}
+    </>
+  );
+}

front/src/modules/activities/notes/components/Notes.tsx

@@ -0,0 +1,91 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconNotes } from '@tabler/icons-react';
+
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { NoteList } from '@/activities/notes/components/NoteList';
+import { useNotes } from '@/activities/notes/hooks/useNotes';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@/ui/button/components/Button';
+import { ActivityType } from '~/generated/graphql';
+
+const StyledTaskGroupEmptyContainer = styled.div`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+  padding-bottom: ${({ theme }) => theme.spacing(16)};
+  padding-left: ${({ theme }) => theme.spacing(4)};
+  padding-right: ${({ theme }) => theme.spacing(4)};
+  padding-top: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledEmptyTaskGroupTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.xxl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+`;
+
+const StyledEmptyTaskGroupSubTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.extraLight};
+  font-size: ${({ theme }) => theme.font.size.xxl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledNotesContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+`;
+
+export function Notes({ entity }: { entity: ActivityTargetableEntity }) {
+  const { notes } = useNotes(entity);
+  const theme = useTheme();
+
+  const openCreateActivity = useOpenCreateActivityDrawer();
+
+  if (notes?.length === 0) {
+    return (
+      <StyledTaskGroupEmptyContainer>
+        <StyledEmptyTaskGroupTitle>No note yet</StyledEmptyTaskGroupTitle>
+        <StyledEmptyTaskGroupSubTitle>Create one:</StyledEmptyTaskGroupSubTitle>
+        <Button
+          icon={<IconNotes size={theme.icon.size.sm} />}
+          title="New note"
+          variant={ButtonVariant.Secondary}
+          onClick={() => openCreateActivity(ActivityType.Note, [entity])}
+        />
+      </StyledTaskGroupEmptyContainer>
+    );
+  }
+
+  return (
+    <StyledNotesContainer>
+      <NoteList
+        title="All"
+        notes={notes ?? []}
+        button={
+          <Button
+            icon={<IconNotes size={theme.icon.size.md} />}
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Secondary}
+            title="Add note"
+            onClick={() => openCreateActivity(ActivityType.Note, [entity])}
+          ></Button>
+        }
+      />
+    </StyledNotesContainer>
+  );
+}

front/src/modules/activities/notes/hooks/useNotes.ts

@@ -0,0 +1,27 @@
+import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql';
+
+import { ActivityTargetableEntity } from '../../types/ActivityTargetableEntity';
+
+export function useNotes(entity: ActivityTargetableEntity) {
+  const { data: notesData } = useGetActivitiesQuery({
+    variables: {
+      where: {
+        type: { equals: ActivityType.Note },
+        activityTargets: {
+          some: {
+            OR: [
+              { companyId: { equals: entity.id } },
+              { personId: { equals: entity.id } },
+            ],
+          },
+        },
+      },
+    },
+  });
+
+  const notes = notesData?.findManyActivities;
+
+  return {
+    notes,
+  };
+}

front/src/modules/activities/tasks/__stories__/TaskGroups.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
+import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
-import { TaskGroups } from '../TaskGroups';
-
 const meta: Meta<typeof TaskGroups> = {
   title: 'Modules/Activity/TaskGroups',
   component: TaskGroups,

front/src/modules/activities/tasks/__stories__/TaskGroupsWithoutTasks.stories.tsx

@@ -4,12 +4,11 @@ import { graphql } from 'msw';
 
 import { GET_ACTIVITIES } from '@/activities/graphql/queries/getActivities';
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
+import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
-import { TaskGroups } from '../TaskGroups';
-
 const meta: Meta<typeof TaskGroups> = {
   title: 'Modules/Activity/TaskGroupsWithoutTasks',
   component: TaskGroups,

front/src/modules/activities/tasks/__stories__/TaskList.stories.tsx

@@ -1,12 +1,11 @@
 import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { TaskList } from '@/activities/tasks/components/TaskList';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedActivities } from '~/testing/mock-data/activities';
 
-import { TaskList } from '../TaskList';
-
 const meta: Meta<typeof TaskList> = {
   title: 'Modules/Activity/TaskList',
   component: TaskList,

front/src/modules/activities/tasks/components/AddTaskButton.tsx

@@ -0,0 +1,34 @@
+import { useTheme } from '@emotion/react';
+
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@/ui/button/components/Button';
+import { IconPlus } from '@/ui/icon';
+import { ActivityType } from '~/generated/graphql';
+
+export function AddTaskButton({
+  entity,
+}: {
+  entity?: ActivityTargetableEntity;
+}) {
+  const theme = useTheme();
+  const openCreateActivity = useOpenCreateActivityDrawer();
+
+  if (!entity) {
+    return <></>;
+  }
+
+  return (
+    <Button
+      icon={<IconPlus size={theme.icon.size.md} />}
+      size={ButtonSize.Small}
+      variant={ButtonVariant.Secondary}
+      title="Add task"
+      onClick={() => openCreateActivity(ActivityType.Task, [entity])}
+    ></Button>
+  );
+}

front/src/modules/activities/tasks/components/EntityTasks.tsx

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
+import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+`;
+
+export function EntityTasks({ entity }: { entity: ActivityTargetableEntity }) {
+  return (
+    <StyledContainer>
+      <RecoilScope SpecificContext={TasksRecoilScopeContext}>
+        <TaskGroups entity={entity} showAddButton />
+      </RecoilScope>
+    </StyledContainer>
+  );
+}

front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -2,14 +2,20 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconCheckbox } from '@tabler/icons-react';
 
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { useTasks } from '@/activities/tasks/hooks/useTasks';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { ActivityType } from '~/generated/graphql';
 
-import { useOpenCreateActivityDrawer } from '../hooks/useOpenCreateActivityDrawer';
-import { useTasks } from '../hooks/useTasks';
-
+import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';
 
+type OwnProps = {
+  entity?: ActivityTargetableEntity;
+  showAddButton?: boolean;
+};
+
 const StyledTaskGroupEmptyContainer = styled.div`
   align-items: center;
   align-self: stretch;
@@ -44,8 +50,9 @@ const StyledContainer = styled.div`
   flex-direction: column;
 `;
 
-export function TaskGroups() {
-  const { todayOrPreviousTasks, upcomingTasks, unscheduledTasks } = useTasks();
+export function TaskGroups({ entity, showAddButton }: OwnProps) {
+  const { todayOrPreviousTasks, upcomingTasks, unscheduledTasks } =
+    useTasks(entity);
   const theme = useTheme();
 
   const openCreateActivity = useOpenCreateActivityDrawer();
@@ -63,7 +70,9 @@ export function TaskGroups() {
           icon={<IconCheckbox size={theme.icon.size.sm} />}
           title="New task"
           variant={ButtonVariant.Secondary}
-          onClick={() => openCreateActivity(ActivityType.Task)}
+          onClick={() =>
+            openCreateActivity(ActivityType.Task, entity ? [entity] : undefined)
+          }
         />
       </StyledTaskGroupEmptyContainer>
     );
@@ -71,9 +80,28 @@ export function TaskGroups() {
 
   return (
     <StyledContainer>
-      <TaskList title="Today" tasks={todayOrPreviousTasks ?? []} />
-      <TaskList title="Upcoming" tasks={upcomingTasks ?? []} />
-      <TaskList title="Unscheduled" tasks={unscheduledTasks ?? []} />
+      <TaskList
+        title="Today"
+        tasks={todayOrPreviousTasks ?? []}
+        button={showAddButton && <AddTaskButton entity={entity} />}
+      />
+      <TaskList
+        title="Upcoming"
+        tasks={upcomingTasks ?? []}
+        button={
+          showAddButton &&
+          !todayOrPreviousTasks?.length && <AddTaskButton entity={entity} />
+        }
+      />
+      <TaskList
+        title="Unscheduled"
+        tasks={unscheduledTasks ?? []}
+        button={
+          showAddButton &&
+          !todayOrPreviousTasks?.length &&
+          !upcomingTasks?.length && <AddTaskButton entity={entity} />
+        }
+      />
     </StyledContainer>
   );
 }

front/src/modules/activities/tasks/components/TaskList.tsx

@@ -1,12 +1,14 @@
+import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
-import { TaskForList } from '../types/TaskForList';
+import { TaskForList } from '@/activities/types/TaskForList';
 
 import { TaskRow } from './TaskRow';
 
 type OwnProps = {
   title: string;
   tasks: TaskForList[];
+  button?: ReactElement | false;
 };
 
 const StyledContainer = styled.div`
@@ -18,11 +20,18 @@ const StyledContainer = styled.div`
   padding: 8px 24px;
 `;
 
+const StyledTitleBar = styled.h3`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+  place-items: center;
+  width: 100%;
+`;
+
 const StyledTitle = styled.h3`
   color: ${({ theme }) => theme.font.color.primary};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
 `;
 
 const StyledCount = styled.span`
@@ -37,14 +46,17 @@ const StyledTaskRows = styled.div`
   width: 100%;
 `;
 
-export function TaskList({ title, tasks }: OwnProps) {
+export function TaskList({ title, tasks, button }: OwnProps) {
   return (
     <>
       {tasks && tasks.length > 0 && (
         <StyledContainer>
-          <StyledTitle>
-            {title} <StyledCount>{tasks.length}</StyledCount>
-          </StyledTitle>
+          <StyledTitleBar>
+            <StyledTitle>
+              {title} <StyledCount>{tasks.length}</StyledCount>
+            </StyledTitle>
+            {button}
+          </StyledTitleBar>
           <StyledTaskRows>
             {tasks.map((task) => (
               <TaskRow key={task.id} task={task} />

front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -11,8 +11,8 @@ import {
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 import { beautifyExactDate, hasDatePassed } from '~/utils/date-utils';
 
+import { TaskForList } from '../../types/TaskForList';
 import { useCompleteTask } from '../hooks/useCompleteTask';
-import { TaskForList } from '../types/TaskForList';
 
 const StyledContainer = styled.div`
   align-items: center;

front/src/modules/activities/tasks/hooks/useCompleteTask.ts

@@ -4,8 +4,8 @@ import { getOperationName } from '@apollo/client/utilities';
 
 import { Activity, useUpdateActivityMutation } from '~/generated/graphql';
 
-import { ACTIVITY_UPDATE_FRAGMENT } from '../graphql/fragments/activityUpdateFragment';
-import { GET_ACTIVITIES } from '../graphql/queries/getActivities';
+import { ACTIVITY_UPDATE_FRAGMENT } from '../../graphql/fragments/activityUpdateFragment';
+import { GET_ACTIVITIES } from '../../graphql/queries/getActivities';
 
 type Task = Pick<Activity, 'id' | 'completedAt'>;
 

front/src/modules/activities/tasks/hooks/useInitializeTasksFilters.ts

@@ -4,7 +4,7 @@ import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/available
 import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
-import { TasksRecoilScopeContext } from '../states/recoil-scope-contexts/TasksRecoilScopeContext';
+import { TasksRecoilScopeContext } from '../../states/recoil-scope-contexts/TasksRecoilScopeContext';
 
 export function useInitializeTasksFilters({
   availableFilters,

front/src/modules/activities/tasks/hooks/useTasks.ts

@@ -2,6 +2,9 @@ import { useEffect } from 'react';
 import { DateTime } from 'luxon';
 import { useRecoilState } from 'recoil';
 
+import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
+import { useInitializeTasksFilters } from '@/activities/tasks/hooks/useInitializeTasksFilters';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { FilterOperand } from '@/ui/filter-n-sort/types/FilterOperand';
@@ -12,11 +15,7 @@ import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql';
 import { tasksFilters } from '~/pages/tasks/tasks-filters';
 import { parseDate } from '~/utils/date-utils';
 
-import { TasksRecoilScopeContext } from '../states/recoil-scope-contexts/TasksRecoilScopeContext';
-
-import { useInitializeTasksFilters } from './useInitializeTasksFilters';
-
-export function useTasks() {
+export function useTasks(entity?: ActivityTargetableEntity) {
   useInitializeTasksFilters({
     availableFilters: tasksFilters,
   });
@@ -35,7 +34,7 @@ export function useTasks() {
   const [currentUser] = useRecoilState(currentUserState);
 
   useEffect(() => {
-    if (currentUser && !filters.length) {
+    if (currentUser && !filters.length && !entity) {
       setFilters([
         {
           key: 'assigneeId',
@@ -47,14 +46,25 @@ export function useTasks() {
         },
       ]);
     }
-  }, [currentUser, filters, setFilters]);
+  }, [currentUser, filters, setFilters, entity]);
 
-  const whereFilters = Object.assign(
-    {},
-    ...filters.map((filter) => {
-      return turnFilterIntoWhereClause(filter);
-    }),
-  );
+  const whereFilters = entity
+    ? {
+        activityTargets: {
+          some: {
+            OR: [
+              { companyId: { equals: entity.id } },
+              { personId: { equals: entity.id } },
+            ],
+          },
+        },
+      }
+    : Object.assign(
+        {},
+        ...filters.map((filter) => {
+          return turnFilterIntoWhereClause(filter);
+        }),
+      );
 
   const { data: completeTasksData } = useGetActivitiesQuery({
     variables: {
@@ -77,7 +87,7 @@ export function useTasks() {
   });
 
   const tasksData =
-    activeTabId === 'done' ? completeTasksData : incompleteTaskData;
+    activeTabId === 'done' || !entity ? completeTasksData : incompleteTaskData;
 
   const todayOrPreviousTasks = tasksData?.findManyActivities.filter((task) => {
     if (!task.dueAt) {

front/src/modules/activities/timeline/components/Timeline.tsx

@@ -51,24 +51,6 @@ const StyledEmptyTimelineSubTitle = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
-const StyledTopActionBar = styled.div`
-  align-items: flex-start;
-  align-self: stretch;
-  backdrop-filter: ${() => (useIsMobile() ? 'none' : `blur(5px)`)};
-
-  border-bottom: ${({ theme }) =>
-    useIsMobile() ? 'none' : `1px solid ${theme.border.color.medium}`};
-
-  border-top-right-radius: ${() => (useIsMobile() ? 'none' : `8px`)};
-
-  display: flex;
-  flex-direction: column;
-  left: 0px;
-  padding: 12px 16px 12px 16px;
-  position: ${() => (useIsMobile() ? 'relative' : 'sticky')};
-  top: 0px;
-`;
-
 export function Timeline({ entity }: { entity: ActivityTargetableEntity }) {
   const { data: queryResult, loading } = useGetActivitiesByTargetsQuery({
     variables: {
@@ -104,12 +86,6 @@ export function Timeline({ entity }: { entity: ActivityTargetableEntity }) {
 
   return (
     <StyledMainContainer>
-      <StyledTopActionBar>
-        <ActivityCreateButton
-          onNoteClick={() => openCreateActivity(ActivityType.Note, [entity])}
-          onTaskClick={() => openCreateActivity(ActivityType.Task, [entity])}
-        />
-      </StyledTopActionBar>
       <TimelineItemsContainer activities={activities} />
     </StyledMainContainer>
   );

front/src/modules/activities/timeline/components/TimelineActivity.tsx

@@ -1,8 +1,8 @@
 import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
 
-import { useCompleteTask } from '@/activities/hooks/useCompleteTask';
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
+import { useCompleteTask } from '@/activities/tasks/hooks/useCompleteTask';
 import { IconNotes } from '@/ui/icon';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

front/src/modules/activities/types/NoteForList.ts

@@ -0,0 +1,3 @@
+import { GetActivitiesQuery } from '~/generated/graphql';
+
+export type NoteForList = GetActivitiesQuery['findManyActivities'][0];