Refactored modules/ui

docs/docs/contributor/frontend/basics/overview.mdx → docs/docs/contributor/frontend/basics/basics.mdx

@@ -1,11 +1,15 @@
 ---
-title: Overview
-description: Overview
+title: Basics
+# description: Overview
 sidebar_position: 0
 sidebar_custom_props:
   icon: TbEyeglass
 ---
 
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
+
 ## Tech Stack
 
 We took care of having a clean and simple stack, with minimal boilerplate code.

docs/docs/contributor/frontend/basics/contributing.mdx

@@ -4,6 +4,9 @@ sidebar_position: 1
 sidebar_custom_props:
   icon: TbTopologyStar
 ---
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
 
 ## Pre-requesites
 

docs/docs/contributor/frontend/basics/design-system.mdx

@@ -1,9 +1,14 @@
 ---
+title: Design System
 sidebar_position: 7
 sidebar_custom_props:
   icon: TbPaint
 ---
 
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
+
 # Design System
 
 We rely on our internal and custom design system, that is built on top of styled-components.

docs/docs/contributor/frontend/basics/folder-architecture.mdx

@@ -1,9 +1,14 @@
 ---
+title: Folder Architecture
 sidebar_position: 5
 sidebar_custom_props:
   icon: TbFolder
 ---
 
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
+
 # Folder Architecture
 
 In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.

docs/docs/contributor/frontend/basics/work-with-figma.mdx

@@ -5,6 +5,10 @@ sidebar_custom_props:
   icon: TbBrandFigma
 ---
 
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
+
 Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
 In this guide, we'll go over how to collaborate with Twenty’s Figma.
 

docs/docs/contributor/frontend/frontend.mdx

@@ -7,6 +7,7 @@ sidebar_custom_props:
   icon: TbTerminal2
   isSidebarRoot: true
 ---
+
 Welcome to the Frontend Development section of the documentation. 
 Here you will find information about the frontend development process, the tools we use, and the best practices we follow.
 

docs/src/css/custom.css

@@ -234,4 +234,8 @@ a.table-of-contents__link:hover{
 
 .tabs-container {
   padding: 20px;
+}
+
+.card{
+  text-decoration: none;
 }

front/src/App.tsx

@@ -2,7 +2,7 @@ import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { DefaultLayout } from '@/ui/layout/components/DefaultLayout';
+import { DefaultLayout } from '@/ui/Layout/Page/DefaultLayout';
 import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
 import { CommandMenuEffect } from '~/effect-components/CommandMenuEffect';
 import { GotoHotkeysEffect } from '~/effect-components/GotoHotkeysEffect';

front/src/AppNavbar.tsx

@@ -12,11 +12,11 @@ import {
   IconSettings,
   IconTargetArrow,
   IconUser,
-} from '@/ui/icon/index';
-import { useIsSubMenuNavbarDisplayed } from '@/ui/layout/hooks/useIsSubMenuNavbarDisplayed';
-import MainNavbar from '@/ui/navbar/components/MainNavbar';
-import NavItem from '@/ui/navbar/components/NavItem';
-import NavTitle from '@/ui/navbar/components/NavTitle';
+} from '@/ui/Display/Icon/index';
+import { useIsSubMenuNavbarDisplayed } from '@/ui/Layout/hooks/useIsSubMenuNavbarDisplayed';
+import MainNavbar from '@/ui/Navigation/Navbar/components/MainNavbar';
+import NavItem from '@/ui/Navigation/Navbar/components/NavItem';
+import NavTitle from '@/ui/Navigation/Navbar/components/NavTitle';
 
 import { measureTotalFrameLoad } from './utils/measureTotalFrameLoad';
 

front/src/effect-components/GotoHotkeysEffect.tsx

@@ -1,4 +1,4 @@
-import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys';
+import { useGoToHotkeys } from '@/ui/Utilities/hotkey/hooks/useGoToHotkeys';
 
 export const GotoHotkeysEffect = () => {
   useGoToHotkeys('p', '/people');

front/src/effect-components/PageChangeEffect.tsx

@@ -15,7 +15,7 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { TableHotkeyScope } from '@/ui/data-table/types/TableHotkeyScope';
 import { IconCheckbox, IconNotes } from '@/ui/icon';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useSetHotkeyScope } from '@/ui/Utilities/hotkey/hooks/useSetHotkeyScope';
 import {
   ActivityType,
   useGetWorkspaceFromInviteHashLazyQuery,

front/src/index.tsx

@@ -7,10 +7,10 @@ import { RecoilRoot } from 'recoil';
 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
 import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
 import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
-import { DialogProvider } from '@/ui/dialog/components/DialogProvider';
-import { SnackBarProvider } from '@/ui/snack-bar/components/SnackBarProvider';
-import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
-import { ThemeType } from '@/ui/theme/constants/theme';
+import { DialogProvider } from '@/ui/Feedback/Dialog/components/DialogProvider';
+import { SnackBarProvider } from '@/ui/Feedback/Snack Bar/components/SnackBarProvider';
+import { AppThemeProvider } from '@/ui/Themes/theme/components/AppThemeProvider';
+import { ThemeType } from '@/ui/Themes/theme/constants/theme';
 import { UserProvider } from '@/users/components/UserProvider';
 
 import '@emotion/react';

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

@@ -2,10 +2,10 @@ import { useApolloClient } from '@apollo/client';
 import { getOperationName } from '@apollo/client/utilities';
 
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
-import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
-import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
-import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
-import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { SingleEntitySelect } from '@/ui/Input/Relation Picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/Input/Relation Picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/ui/Input/Relation Picker/types/EntityForSelect';
+import { Entity } from '@/ui/Input/Relation Picker/types/EntityTypeForSelect';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import {
   Activity,

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

@@ -5,7 +5,7 @@ import { useBlockNote } from '@blocknote/react';
 import styled from '@emotion/styled';
 import debounce from 'lodash.debounce';
 
-import { BlockEditor } from '@/ui/editor/components/BlockEditor';
+import { BlockEditor } from '@/ui/Input/Editor/components/BlockEditor';
 import { Activity, useUpdateActivityMutation } from '~/generated/graphql';
 
 import { ACTIVITY_UPDATE_FRAGMENT } from '../graphql/fragments/activityUpdateFragment';

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

@@ -7,7 +7,7 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import {
   AutosizeTextInput,
   AutosizeTextInputVariant,
-} from '@/ui/input/components/AutosizeTextInput';
+} from '@/ui/Input/components/AutosizeTextInput';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { Activity, useCreateCommentMutation } from '~/generated/graphql';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';

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

@@ -1,6 +1,10 @@
-import { Button } from '@/ui/button/components/Button';
-import { ButtonGroup } from '@/ui/button/components/ButtonGroup';
-import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icon/index';
+import {
+  IconCheckbox,
+  IconNotes,
+  IconTimelineEvent,
+} from '@/ui/Display/Icon/index';
+import { Button } from '@/ui/Input/Button/components/Button';
+import { ButtonGroup } from '@/ui/Input/Button/components/ButtonGroup';
 
 type ActivityCreateButtonProps = {
   onNoteClick?: () => void;

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

@@ -7,7 +7,7 @@ import { ActivityBodyEditor } from '@/activities/components/ActivityBodyEditor';
 import { ActivityComments } from '@/activities/components/ActivityComments';
 import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdown';
 import { GET_ACTIVITIES } from '@/activities/graphql/queries/getActivities';
-import { PropertyBox } from '@/ui/inline-cell/property-box/components/PropertyBox';
+import { PropertyBox } from '@/ui/Data/Inline Cell/property-box/components/PropertyBox';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import {

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

@@ -4,7 +4,7 @@ import {
   Checkbox,
   CheckboxShape,
   CheckboxSize,
-} from '@/ui/input/components/Checkbox';
+} from '@/ui/Input/components/Checkbox';
 import { ActivityType } from '~/generated/graphql';
 
 const StyledEditableTitleInput = styled.input<{

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

@@ -5,8 +5,8 @@ import {
   ChipAccent,
   ChipSize,
   ChipVariant,
-} from '@/ui/chip/components/Chip';
-import { IconCheckbox, IconNotes } from '@/ui/icon';
+} from '@/ui/Display/Chip/components/Chip';
+import { IconCheckbox, IconNotes } from '@/ui/Display/Icon';
 import { Activity, ActivityType } from '~/generated/graphql';
 
 type ActivityTypeDropdownProps = {

front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx

@@ -1,10 +1,10 @@
-import { FieldContext } from '@/ui/field/contexts/FieldContext';
-import { FieldDefinition } from '@/ui/field/types/FieldDefinition';
-import { FieldRelationMetadata } from '@/ui/field/types/FieldMetadata';
-import { IconUserCircle } from '@/ui/icon';
-import { InlineCell } from '@/ui/inline-cell/components/InlineCell';
-import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeyScope';
-import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { FieldContext } from '@/ui/Data/Field/contexts/FieldContext';
+import { FieldDefinition } from '@/ui/Data/Field/types/FieldDefinition';
+import { FieldRelationMetadata } from '@/ui/Data/Field/types/FieldMetadata';
+import { InlineCell } from '@/ui/Data/Inline Cell/components/InlineCell';
+import { InlineCellHotkeyScope } from '@/ui/Data/Inline Cell/types/InlineCellHotkeyScope';
+import { IconUserCircle } from '@/ui/Display/Icon';
+import { Entity } from '@/ui/Input/Relation Picker/types/EntityTypeForSelect';
 import { Company, User, useUpdateActivityMutation } from '~/generated/graphql';
 
 type ActivityAssigneeEditableFieldProps = {

front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableFieldEditMode.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import { ActivityAssigneePicker } from '@/activities/components/ActivityAssigneePicker';
-import { useInlineCell } from '@/ui/inline-cell/hooks/useInlineCell';
+import { useInlineCell } from '@/ui/Data/Inline Cell/hooks/useInlineCell';
 import { Activity, User } from '~/generated/graphql';
 
 const StyledContainer = styled.div`

front/src/modules/activities/editable-fields/components/ActivityEditorDateField.tsx

@@ -1,9 +1,9 @@
-import { FieldContext } from '@/ui/field/contexts/FieldContext';
-import { FieldDefinition } from '@/ui/field/types/FieldDefinition';
-import { FieldDateMetadata } from '@/ui/field/types/FieldMetadata';
-import { IconCalendar } from '@/ui/icon/index';
-import { InlineCell } from '@/ui/inline-cell/components/InlineCell';
-import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeyScope';
+import { FieldContext } from '@/ui/Data/Field/contexts/FieldContext';
+import { FieldDefinition } from '@/ui/Data/Field/types/FieldDefinition';
+import { FieldDateMetadata } from '@/ui/Data/Field/types/FieldMetadata';
+import { InlineCell } from '@/ui/Data/Inline Cell/components/InlineCell';
+import { InlineCellHotkeyScope } from '@/ui/Data/Inline Cell/types/InlineCellHotkeyScope';
+import { IconCalendar } from '@/ui/Display/Icon/index';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useUpdateActivityMutation } from '~/generated/graphql';
 

front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx

@@ -1,8 +1,8 @@
 import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
-import { IconArrowUpRight, IconPencil } from '@/ui/icon';
-import { InlineCellContainer } from '@/ui/inline-cell/components/InlineCellContainer';
-import { FieldRecoilScopeContext } from '@/ui/inline-cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
-import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { InlineCellContainer } from '@/ui/Data/Inline Cell/components/InlineCellContainer';
+import { FieldRecoilScopeContext } from '@/ui/Data/Inline Cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
+import { IconArrowUpRight, IconPencil } from '@/ui/Display/Icon';
+import { RelationPickerHotkeyScope } from '@/ui/Input/Relation Picker/types/RelationPickerHotkeyScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Activity, ActivityTarget, Company, Person } from '~/generated/graphql';
 

front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx

@@ -5,8 +5,8 @@ import { useHandleCheckableActivityTargetChange } from '@/activities/hooks/useHa
 import { flatMapAndSortEntityForSelectArrayOfArrayByName } from '@/activities/utils/flatMapAndSortEntityForSelectArrayByName';
 import { useFilteredSearchCompanyQuery } from '@/companies/hooks/useFilteredSearchCompanyQuery';
 import { useFilteredSearchPeopleQuery } from '@/people/hooks/useFilteredSearchPeopleQuery';
-import { useInlineCell } from '@/ui/inline-cell/hooks/useInlineCell';
-import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
+import { useInlineCell } from '@/ui/Data/Inline Cell/hooks/useInlineCell';
+import { MultipleEntitySelect } from '@/ui/Input/Relation Picker/components/MultipleEntitySelect';
 import { Activity, ActivityTarget } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';
 

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

@@ -1,8 +1,8 @@
 import { useRecoilState } from 'recoil';
 
-import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer';
-import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope';
-import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
+import { useRightDrawer } from '@/ui/Layout/Right Drawer/hooks/useRightDrawer';
+import { RightDrawerHotkeyScope } from '@/ui/Layout/Right Drawer/types/RightDrawerHotkeyScope';
+import { RightDrawerPages } from '@/ui/Layout/Right Drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
 import { viewableActivityIdState } from '../states/viewableActivityIdState';

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

@@ -5,9 +5,9 @@ import { v4 } from 'uuid';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { GET_COMPANIES } from '@/companies/graphql/queries/getCompanies';
 import { GET_PEOPLE } from '@/people/graphql/queries/getPeople';
-import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer';
-import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope';
-import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
+import { useRightDrawer } from '@/ui/Layout/Right Drawer/hooks/useRightDrawer';
+import { RightDrawerHotkeyScope } from '@/ui/Layout/Right Drawer/types/RightDrawerHotkeyScope';
+import { RightDrawerPages } from '@/ui/Layout/Right Drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { ActivityType, useCreateActivityMutation } from '~/generated/graphql';
 

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

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { selectedRowIdsSelector } from '@/ui/data-table/states/selectors/selectedRowIdsSelector';
+import { selectedRowIdsSelector } from '@/ui/Data/Data Table/states/selectors/selectedRowIdsSelector';
 import { ActivityType } from '~/generated/graphql';
 
 import {

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

@@ -4,8 +4,8 @@ import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateAct
 import { NoteList } from '@/activities/notes/components/NoteList';
 import { useNotes } from '@/activities/notes/hooks/useNotes';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
-import { Button } from '@/ui/button/components/Button';
-import { IconNotes } from '@/ui/icon';
+import { IconNotes } from '@/ui/Display/Icon';
+import { Button } from '@/ui/Input/Button/components/Button';
 import { ActivityType } from '~/generated/graphql';
 
 const StyledTaskGroupEmptyContainer = styled.div`

front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -5,9 +5,9 @@ import { GET_ACTIVITIES } from '@/activities/graphql/queries/getActivities';
 import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/graphql/queries/getActivitiesByTarget';
 import { GET_COMPANIES } from '@/companies/graphql/queries/getCompanies';
 import { GET_PEOPLE } from '@/people/graphql/queries/getPeople';
-import { LightIconButton } from '@/ui/button/components/LightIconButton';
-import { IconTrash } from '@/ui/icon';
-import { isRightDrawerOpenState } from '@/ui/right-drawer/states/isRightDrawerOpenState';
+import { IconTrash } from '@/ui/Display/Icon';
+import { LightIconButton } from '@/ui/Input/Button/components/LightIconButton';
+import { isRightDrawerOpenState } from '@/ui/Layout/Right Drawer/states/isRightDrawerOpenState';
 import { useDeleteActivityMutation } from '~/generated/graphql';
 
 type ActivityActionBarProps = {

front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { ActivityEditor } from '@/activities/components/ActivityEditor';
-import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
+import { entityFieldsFamilyState } from '@/ui/Data/Field/states/entityFieldsFamilyState';
 import { useGetActivityQuery } from '~/generated/graphql';
 
 import '@blocknote/core/style.css';

front/src/modules/activities/table/components/CommentChip.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { IconComment } from '@/ui/icon';
+import { IconComment } from '@/ui/Display/Icon';
 
 export type CommentChipProps = {
   count: number;

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

@@ -1,7 +1,7 @@
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
-import { Button } from '@/ui/button/components/Button';
-import { IconPlus } from '@/ui/icon';
+import { IconPlus } from '@/ui/Display/Icon';
+import { Button } from '@/ui/Input/Button/components/Button';
 import { ActivityType } from '~/generated/graphql';
 
 export const AddTaskButton = ({

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

@@ -1,8 +1,8 @@
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
-import { PageAddButton } from '@/ui/layout/components/PageAddButton';
+import { filtersScopedState } from '@/ui/Data/View Bar/states/filtersScopedState';
+import { PageAddButton } from '@/ui/Layout/Page/PageAddButton';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
 import { ActivityType } from '~/generated/graphql';
 
 export const PageAddTaskButton = () => {

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

@@ -4,9 +4,9 @@ import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateAct
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
-import { Button } from '@/ui/button/components/Button';
-import { IconCheckbox } from '@/ui/icon';
-import { activeTabIdScopedState } from '@/ui/tab/states/activeTabIdScopedState';
+import { IconCheckbox } from '@/ui/Display/Icon';
+import { Button } from '@/ui/Input/Button/components/Button';
+import { activeTabIdScopedState } from '@/ui/Layout/Tab/states/activeTabIdScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { ActivityType } from '~/generated/graphql';