[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/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor.tsx

@@ -4,8 +4,8 @@ import dotenv from 'dotenv';
 import { editor, MarkerSeverity } from 'monaco-editor';
 import { AutoTypings } from 'monaco-editor-auto-typings';
 import { useParams } from 'react-router-dom';
-import { CodeEditor } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { CodeEditor } from 'twenty-ui/input';
 
 export type File = {
   language: string;

packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx

@@ -2,7 +2,8 @@ import { ServerlessFunctionNewFormValues } from '@/settings/serverless-functions
 import { TextArea } from '@/ui/input/components/TextArea';
 import { TextInput } from '@/ui/input/components/TextInput';
 import styled from '@emotion/styled';
-import { H2Title, Section } from 'twenty-ui';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 const StyledInputsContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsFieldItemTableRow.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { ServerlessFunction } from '~/generated-metadata/graphql';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { IconChevronRight } from 'twenty-ui';
 import { useTheme } from '@emotion/react';
+import { IconChevronRight } from 'twenty-ui/display';
 
 export const StyledApisFieldTableRow = styled(TableRow)`
   grid-template-columns: 312px 132px 68px;

packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty.tsx

@@ -1,16 +1,16 @@
 import { SettingsPath } from '@/types/SettingsPath';
 import styled from '@emotion/styled';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import {
   AnimatedPlaceholder,
   AnimatedPlaceholderEmptyContainer,
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
-  Button,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  IconPlus,
-} from 'twenty-ui';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+} from 'twenty-ui/layout';
+import { Button } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui/display';
 
 const StyledEmptyFunctionsContainer = styled.div`
   height: 60vh;

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx

@@ -11,17 +11,16 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
+import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { Button, CoreEditorHeader } from 'twenty-ui/input';
 import {
-  Button,
-  CoreEditorHeader,
   H2Title,
   IconGitCommit,
   IconPlayerPlay,
   IconRestore,
-  Section,
-} from 'twenty-ui';
-import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
-import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+} from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 const StyledTabList = styled(TabList)`
   border-bottom: none;

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionSettingsTab.tsx

@@ -8,9 +8,11 @@ import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModa
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useState } from 'react';
 import { Key } from 'ts-key-enum';
-import { Button, H2Title, Section } from 'twenty-ui';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { Button } from 'twenty-ui/input';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 export const SettingsServerlessFunctionSettingsTab = ({
   formValues,

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx

@@ -13,10 +13,10 @@ import {
   IconPencil,
   IconTrash,
   IconX,
-  LightIconButton,
-  MenuItem,
   OverflowingTextWithTooltip,
-} from 'twenty-ui';
+} from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { MenuItem } from 'twenty-ui/navigation';
 
 const StyledEditModeTableRow = styled(TableRow)`
   grid-template-columns: 180px auto 56px;

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection.tsx

@@ -8,15 +8,11 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
 import dotenv from 'dotenv';
 import { useMemo, useState } from 'react';
-import {
-  Button,
-  H2Title,
-  IconPlus,
-  IconSearch,
-  MOBILE_VIEWPORT,
-  Section,
-} from 'twenty-ui';
 import { v4 } from 'uuid';
+import { Button } from 'twenty-ui/input';
+import { H2Title, IconPlus, IconSearch } from 'twenty-ui/display';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { Section } from 'twenty-ui/layout';
 
 const StyledSearchInput = styled(TextInput)`
   padding-bottom: ${({ theme }) => theme.spacing(2)};

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx

@@ -1,12 +1,3 @@
-import {
-  Button,
-  CodeEditor,
-  CoreEditorHeader,
-  H2Title,
-  IconPlayerPlay,
-  Section,
-} from 'twenty-ui';
-
 import { ServerlessFunctionExecutionResult } from '@/serverless-functions/components/ServerlessFunctionExecutionResult';
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -17,6 +8,9 @@ import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { Button, CodeEditor, CoreEditorHeader } from 'twenty-ui/input';
+import { H2Title, IconPlayerPlay } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 const StyledInputsContainer = styled.div`
   display: flex;