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/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { IconButton } from '@/ui/button/components/IconButton';
+import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
+import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
+import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { IconCheckbox, IconNotes, IconPlus } from '@/ui/icon/index';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { ActivityType } from '~/generated/graphql';
+
+const StyledContainer = styled.div`
+  z-index: 1;
+`;
+
+export function ShowPageAddButton({
+  entity,
+}: {
+  entity: ActivityTargetableEntity;
+}) {
+  const { closeDropdownButton, toggleDropdownButton } = useDropdownButton({
+    key: 'add-show-page',
+  });
+  const openCreateActivity = useOpenCreateActivityDrawer();
+
+  function handleSelect(type: ActivityType) {
+    console.log(type, entity);
+    openCreateActivity(type, [entity]);
+    closeDropdownButton();
+  }
+
+  return (
+    <StyledContainer>
+      <DropdownButton
+        dropdownKey="add-show-page"
+        buttonComponents={
+          <IconButton
+            icon={<IconPlus size={16} />}
+            size="large"
+            data-testid="add-showpage-button"
+            textColor={'secondary'}
+            variant="border"
+            onClick={toggleDropdownButton}
+          />
+        }
+        dropdownComponents={
+          <StyledDropdownMenu>
+            <StyledDropdownMenuItemsContainer
+              onClick={(e) => e.stopPropagation()}
+            >
+              <DropdownMenuItem
+                onClick={() => handleSelect(ActivityType.Note)}
+                accent="regular"
+              >
+                <IconNotes size={16} />
+                Note
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => handleSelect(ActivityType.Note)}
+                accent="regular"
+              >
+                <IconCheckbox size={16} />
+                Task
+              </DropdownMenuItem>
+            </StyledDropdownMenuItemsContainer>
+          </StyledDropdownMenu>
+        }
+        dropdownHotkeyScope={{
+          scope: RelationPickerHotkeyScope.RelationPicker,
+        }}
+      />
+    </StyledContainer>
+  );
+}

front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -1,9 +1,24 @@
-import { ReactElement } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { Notes } from '@/activities/notes/components/Notes';
+import { EntityTasks } from '@/activities/tasks/components/EntityTasks';
+import { Timeline } from '@/activities/timeline/components/Timeline';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import {
+  IconCheckbox,
+  IconMail,
+  IconNotes,
+  IconTimelineEvent,
+} from '@/ui/icon';
+import { TabList } from '@/ui/tab/components/TabList';
+import { activeTabIdScopedState } from '@/ui/tab/states/activeTabIdScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-export const StyledShowPageRightContainer = styled.div`
+import { ShowPageRecoilScopeContext } from '../../states/ShowPageRecoilScopeContext';
+
+const StyledShowPageRightContainer = styled.div`
   display: flex;
   flex: 1 0 0;
   flex-direction: column;
@@ -12,14 +27,75 @@ export const StyledShowPageRightContainer = styled.div`
   width: calc(100% + 4px);
 `;
 
-export type ShowPageRightContainerProps = {
-  children: ReactElement;
+const StyledTabListContainer = styled.div`
+  align-items: end;
+  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+  box-sizing: border-box;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: 40px;
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+type OwnProps = {
+  entity: ActivityTargetableEntity;
+  timeline?: boolean;
+  tasks?: boolean;
+  notes?: boolean;
+  emails?: boolean;
 };
 
 export function ShowPageRightContainer({
-  children,
-}: ShowPageRightContainerProps) {
+  entity,
+  timeline,
+  tasks,
+  notes,
+  emails,
+}: OwnProps) {
+  const theme = useTheme();
+
+  const TASK_TABS = [
+    {
+      id: 'timeline',
+      title: 'Timeline',
+      icon: <IconTimelineEvent size={theme.icon.size.md} />,
+      hide: !timeline,
+    },
+    {
+      id: 'tasks',
+      title: 'Tasks',
+      icon: <IconCheckbox size={theme.icon.size.md} />,
+      hide: !tasks,
+    },
+    {
+      id: 'notes',
+      title: 'Notes',
+      icon: <IconNotes size={theme.icon.size.md} />,
+      hide: !notes,
+    },
+    {
+      id: 'emails',
+      title: 'Emails',
+      icon: <IconMail size={theme.icon.size.md} />,
+      hide: !emails,
+      disabled: true,
+    },
+  ];
+
+  const [activeTabId] = useRecoilScopedState(
+    activeTabIdScopedState,
+    ShowPageRecoilScopeContext,
+  );
+
   return (
-    <StyledShowPageRightContainer>{children} </StyledShowPageRightContainer>
+    <StyledShowPageRightContainer>
+      <StyledTabListContainer>
+        <TabList context={ShowPageRecoilScopeContext} tabs={TASK_TABS} />
+      </StyledTabListContainer>
+      {activeTabId === 'timeline' && <Timeline entity={entity} />}
+      {activeTabId === 'tasks' && <EntityTasks entity={entity} />}
+      {activeTabId === 'notes' && <Notes entity={entity} />}
+    </StyledShowPageRightContainer>
   );
 }