[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/command-menu/hooks/__tests__/useCommandMenuCloseAnimationCompleteCleanup.test.tsx

@@ -18,7 +18,7 @@ import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuCl
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
-import { IconList } from 'twenty-ui';
+import { IconList } from 'twenty-ui/display';
 
 const mockCloseDropdown = jest.fn();
 const mockResetContextStoreStates = jest.fn();

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuHistory.test.tsx

@@ -11,7 +11,7 @@ import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageI
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { IconList, IconSearch } from 'twenty-ui';
+import { IconList, IconSearch } from 'twenty-ui/display';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useNavigateCommandMenu.test.tsx

@@ -9,9 +9,9 @@ import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageI
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
-import { Icon123, useIcons } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { Icon123, useIcons } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenCalendarEventInCommandMenu.test.tsx

@@ -7,9 +7,9 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { IconCalendarEvent } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { IconCalendarEvent } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenEmailThreadInCommandMenu.test.tsx

@@ -7,9 +7,9 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { IconMail } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { IconMail } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenRecordInCommandMenu.test.tsx

@@ -15,9 +15,9 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useIcons } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { useIcons } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx

@@ -5,7 +5,7 @@ import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { renderHook } from '@testing-library/react';
 import { act } from 'react';
 import { RecoilRoot, useRecoilValue } from 'recoil';
-import { IconArrowDown, IconDotsVertical } from 'twenty-ui';
+import { IconArrowDown, IconDotsVertical } from 'twenty-ui/display';
 
 const mockedPageInfo = {
   title: 'Initial Title',

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx

@@ -16,10 +16,10 @@ import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { t } from '@lingui/core/macro';
 import { act } from 'react';
-import { IconBolt, IconSettingsAutomation, useIcons } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { useWorkflowCommandMenu } from '../useWorkflowCommandMenu';
+import { IconBolt, IconSettingsAutomation, useIcons } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -1,7 +1,6 @@
 import { useRecoilCallback } from 'recoil';
 
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
-import { IconDotsVertical } from 'twenty-ui';
 
 import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
 import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
@@ -9,6 +8,7 @@ import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { isDragSelectionStartEnabledState } from '@/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState';
 import { useCallback } from 'react';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
+import { IconDotsVertical } from 'twenty-ui/display';
 
 export const useCommandMenu = () => {
   const { navigateCommandMenu } = useNavigateCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx

@@ -6,9 +6,9 @@ import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { capitalize } from 'twenty-shared/utils';
-import { Avatar } from 'twenty-ui';
 import { useDebounce } from 'use-debounce';
 import { useSearchQuery } from '~/generated/graphql';
+import { Avatar } from 'twenty-ui/display';
 
 export const useCommandMenuSearchRecords = () => {
   const commandMenuSearch = useRecoilValue(commandMenuSearchState);

packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts

@@ -15,8 +15,8 @@ import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainCo
 import { isDragSelectionStartEnabledState } from '@/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useRecoilCallback } from 'recoil';
-import { IconComponent } from 'twenty-ui';
 import { v4 } from 'uuid';
+import { IconComponent } from 'twenty-ui/display';
 
 export type CommandMenuNavigationStackItem = {
   page: CommandMenuPages;

packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts

@@ -3,8 +3,8 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
-import { IconCalendarEvent } from 'twenty-ui';
 import { v4 } from 'uuid';
+import { IconCalendarEvent } from 'twenty-ui/display';
 
 export const useOpenCalendarEventInCommandMenu = () => {
   const { navigateCommandMenu } = useNavigateCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts

@@ -2,8 +2,8 @@ import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandM
 import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useRecoilCallback } from 'recoil';
-import { IconMail } from 'twenty-ui';
 import { v4 } from 'uuid';
+import { IconMail } from 'twenty-ui/display';
 
 export const useOpenEmailThreadInCommandMenu = () => {
   const { navigateCommandMenu } = useNavigateCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts

@@ -16,9 +16,9 @@ import { viewableRecordIdState } from '@/object-record/record-right-drawer/state
 import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
-import { useIcons } from 'twenty-ui';
 import { v4 } from 'uuid';
 import { capitalize } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
 
 export const useOpenRecordInCommandMenu = () => {
   const { navigateCommandMenu } = useCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu.ts

@@ -1,8 +1,8 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { t } from '@lingui/core/macro';
-import { IconSearch } from 'twenty-ui';
 import { v4 } from 'uuid';
+import { IconSearch } from 'twenty-ui/display';
 
 export const useOpenRecordsSearchPageInCommandMenu = () => {
   const { navigateCommandMenu } = useCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useUpdateCommandMenuPageInfo.ts

@@ -1,7 +1,7 @@
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { useRecoilCallback } from 'recoil';
-import { IconComponent, IconDotsVertical } from 'twenty-ui';
+import { IconComponent, IconDotsVertical } from 'twenty-ui/display';
 
 export const useUpdateCommandMenuPageInfo = () => {
   const updateCommandMenuPageInfo = useRecoilCallback(

packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts

@@ -3,8 +3,12 @@ import { workflowIdComponentState } from '@/command-menu/pages/workflow/states/w
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
-import { IconBolt, IconComponent, IconSettingsAutomation } from 'twenty-ui';
 import { v4 } from 'uuid';
+import {
+  IconBolt,
+  IconComponent,
+  IconSettingsAutomation,
+} from 'twenty-ui/display';
 
 export const useWorkflowCommandMenu = () => {
   const { navigateCommandMenu } = useNavigateCommandMenu();