[tasks] add empty state and new task button (#1072)

* [tasks] add empty state

* add refetch + use spacing for padding

* create task auto assigned with dueAt as today

* add unscheduled tasks section

* remove unnecessary assigneeId fetching

* remove unnecessary refetchQueries

* add refetch for delete task

* rename createCommentMutation to deleteActivityMutation in activityActionBar

front/src/modules/activities/components/ActivityEditor.tsx

@@ -5,7 +5,10 @@ import styled from '@emotion/styled';
 import { ActivityBodyEditor } from '@/activities/components/ActivityBodyEditor';
 import { ActivityComments } from '@/activities/components/ActivityComments';
 import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdown';
-import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/queries';
+import {
+  GET_ACTIVITIES,
+  GET_ACTIVITIES_BY_TARGETS,
+} from '@/activities/queries';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
 import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
 import { IconCalendar } from '@/ui/icon/index';
@@ -175,6 +178,7 @@ export function ActivityEditor({
                           dueAt: newDate,
                         },
                       },
+                      refetchQueries: [getOperationName(GET_ACTIVITIES) ?? ''],
                     });
                   }}
                 />

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

@@ -1,13 +1,74 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconCheckbox } from '@tabler/icons-react';
+
+import { Button, ButtonVariant } from '@/ui/button/components/Button';
+import { ActivityType } from '~/generated/graphql';
+
+import { useOpenCreateActivityDrawer } from '../hooks/useOpenCreateActivityDrawer';
 import { useTasks } from '../hooks/useTasks';
 
 import { TaskList } from './TaskList';
 
+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)};
+`;
+
 export function TaskGroups() {
-  const { todayOrPreviousTasks, upcomingTasks } = useTasks();
+  const { todayOrPreviousTasks, upcomingTasks, unscheduledTasks } = useTasks();
+  const theme = useTheme();
+
+  const openCreateActivity = useOpenCreateActivityDrawer();
+
+  if (
+    todayOrPreviousTasks?.length === 0 &&
+    upcomingTasks?.length === 0 &&
+    unscheduledTasks?.length === 0
+  ) {
+    return (
+      <StyledTaskGroupEmptyContainer>
+        <StyledEmptyTaskGroupTitle>No task yet</StyledEmptyTaskGroupTitle>
+        <StyledEmptyTaskGroupSubTitle>Create one:</StyledEmptyTaskGroupSubTitle>
+        <Button
+          icon={<IconCheckbox size={theme.icon.size.sm} />}
+          title="New task"
+          variant={ButtonVariant.Secondary}
+          onClick={() => openCreateActivity(ActivityType.Task)}
+        />
+      </StyledTaskGroupEmptyContainer>
+    );
+  }
+
   return (
     <>
       <TaskList title="Today" tasks={todayOrPreviousTasks ?? []} />
       <TaskList title="Upcoming" tasks={upcomingTasks ?? []} />
+      <TaskList title="Unscheduled" tasks={unscheduledTasks ?? []} />
     </>
   );
 }