[REFACTOR] Twenty UI multi barrel (#11301)

# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203

packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx

@@ -3,8 +3,8 @@ import {
   AnimatedPlaceholderEmptyContainer,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
-  Loader,
-} from 'twenty-ui';
+} from 'twenty-ui/layout';
+import { Loader } from 'twenty-ui/feedback';
 
 export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (
   <AnimatedPlaceholderEmptyContainer>

packages/twenty-front/src/modules/activities/emails/components/EmailThreadBottomBar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { Button, IconArrowBackUp, IconUserCircle } from 'twenty-ui';
+import { Button } from 'twenty-ui/input';
+import { IconArrowBackUp, IconUserCircle } from 'twenty-ui/display';
 
 const StyledThreadBottomBar = styled.div`
   align-items: center;

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-import { AnimatedEaseInOut } from 'twenty-ui';
+import { AnimatedEaseInOut } from 'twenty-ui/utilities';
 
 const StyledThreadMessageBody = styled(motion.div)`
   color: ${({ theme }) => theme.font.color.primary};

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { OverflowingTextWithTooltip } from 'twenty-ui';
 
 import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 type EmailThreadMessageReceiversProps = {
   receivers: EmailThreadMessageParticipant[];

packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconLock } from 'twenty-ui';
+import { IconLock } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
-import { Avatar, GRAY_SCALE } from 'twenty-ui';
 
 import { ActivityRow } from '@/activities/components/ActivityRow';
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { useOpenEmailThreadInCommandMenu } from '@/command-menu/hooks/useOpenEmailThreadInCommandMenu';
 import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
+import { Avatar } from 'twenty-ui/display';
+import { GRAY_SCALE } from 'twenty-ui/theme';
 
 const StyledHeading = styled.div<{ unread: boolean }>`
   display: flex;

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -1,15 +1,4 @@
 import styled from '@emotion/styled';
-import {
-  AnimatedPlaceholder,
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  H1Title,
-  H1TitleFontColor,
-  Section,
-} from 'twenty-ui';
 
 import { ActivityList } from '@/activities/components/ActivityList';
 import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
@@ -22,6 +11,16 @@ import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+  Section,
+} from 'twenty-ui/layout';
+import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx

@@ -2,7 +2,8 @@ import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThread
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { IconPlus, MenuItemAvatar } from 'twenty-ui';
+import { IconPlus } from 'twenty-ui/display';
+import { MenuItemAvatar } from 'twenty-ui/navigation';
 
 export const MessageThreadSubscriberDropdownAddSubscriberMenuItem = ({
   workspaceMember,

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx

@@ -1,14 +1,9 @@
 import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useContext } from 'react';
-import {
-  Avatar,
-  AvatarGroup,
-  Chip,
-  ChipVariant,
-  IconChevronDown,
-  ThemeContext,
-} from 'twenty-ui';
+import { Avatar, AvatarGroup, IconChevronDown } from 'twenty-ui/display';
+import { Chip, ChipVariant } from 'twenty-ui/components';
+import { ThemeContext } from 'twenty-ui/theme';
 
 const MAX_NUMBER_OF_AVATARS = 3;
 

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx

@@ -1,5 +1,4 @@
 import { offset } from '@floating-ui/react';
-import { IconMinus, IconPlus, MenuItem, MenuItemAvatar } from 'twenty-ui';
 
 import { MessageThreadSubscriberDropdownAddSubscriber } from '@/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriber';
 import { MessageThreadSubscribersChip } from '@/activities/emails/components/MessageThreadSubscribersChip';
@@ -11,6 +10,8 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
 import { useState } from 'react';
+import { IconMinus, IconPlus } from 'twenty-ui/display';
+import { MenuItem, MenuItemAvatar } from 'twenty-ui/navigation';
 
 export const MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID =
   'message-thread-subscriber';