refactor(twenty-front): reorganize NavigationMenuItem module into common/display/edit subfolders (#18691)

## Summary

- Reorganizes the `navigation-menu-item` frontend module from a flat
structure into `common/`, `display/`, and `edit/` subfolders with
type-specific subdirectories (`link/`, `folder/`, `object/`, `view/`,
`record/`)
- Every file is now in a leaf folder describing its type: `components/`,
`hooks/`, `utils/`, `types/`, or `constants/`
- Moves 14 NavigationMenuItem-related components out of
`object-metadata/` and `side-panel/pages/` into the
`navigation-menu-item` module where they belong
- Creates type-specific display utility functions (e.g.,
`getLinkNavigationMenuItemLabel`,
`getObjectNavigationMenuItemComputedLink`) to replace generic
switch-based functions
- Unifies the Favorites section drag-and-drop from `@hello-pangea/dnd`
to `@dnd-kit/react`, matching the Workspace section's DnD library
- Renames Favorites section components from `CurrentWorkspaceMember*` to
`Favorites*` for clarity
- Deletes unused `FavoritesDragDropProviderContent` and
`NavbarDragProvider`

## Test plan

- [x] `npx nx typecheck twenty-front` passes
- [x] `npx nx lint:diff-with-main twenty-front` passes (0 warnings, 0
errors)
- [x] `npx nx test twenty-front` passes (763 suites, 4467 tests)
- [ ] Verify favorites drag-and-drop still works in the UI (reorder
items, move between folders)
- [ ] Verify workspace edit mode drag-and-drop still works
- [ ] Verify "add to navigation" drag from command menu/side panel still
works

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

@@ -7,7 +7,7 @@ import { contextStoreCurrentViewTypeComponentState } from '@/context-store/state
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
-import { useNavigationMenuItemsData } from '@/navigation-menu-item/hooks/useNavigationMenuItemsData';
+import { useNavigationMenuItemsData } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemsData';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';

packages/twenty-front/src/modules/command-menu-item/record/no-selection/components/EditNavigationSidebarNoSelectionRecordCommand.tsx

@@ -1,5 +1,5 @@
 import { Command } from '@/command-menu-item/display/components/Command';
-import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/common/states/isNavigationMenuInEditModeState';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 
 export const EditNavigationSidebarNoSelectionRecordCommand = () => {

packages/twenty-front/src/modules/command-menu-item/record/single-record/components/AddToFavoritesSingleRecordCommand.tsx

@@ -1,7 +1,7 @@
 import { Command } from '@/command-menu-item/display/components/Command';
 import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
 import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
-import { useCreateNavigationMenuItem } from '@/navigation-menu-item/hooks/useCreateNavigationMenuItem';
+import { useCreateNavigationMenuItem } from '@/navigation-menu-item/common/hooks/useCreateNavigationMenuItem';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 import { isDefined } from 'twenty-shared/utils';

packages/twenty-front/src/modules/command-menu-item/record/single-record/components/DeleteSingleRecordCommand.tsx

@@ -1,7 +1,7 @@
 import { Command } from '@/command-menu-item/display/components/Command';
 import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
-import { useNavigationMenuItemsData } from '@/navigation-menu-item/hooks/useNavigationMenuItemsData';
-import { useRemoveNavigationMenuItemByTargetRecordId } from '@/navigation-menu-item/hooks/useRemoveNavigationMenuItemByTargetRecordId';
+import { useNavigationMenuItemsData } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemsData';
+import { useRemoveNavigationMenuItemByTargetRecordId } from '@/navigation-menu-item/common/hooks/useRemoveNavigationMenuItemByTargetRecordId';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { useRemoveSelectedRecordsFromRecordBoard } from '@/object-record/record-board/hooks/useRemoveSelectedRecordsFromRecordBoard';
 import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';

packages/twenty-front/src/modules/command-menu-item/record/single-record/components/RemoveFromFavoritesSingleRecordCommand.tsx

@@ -1,8 +1,8 @@
 import { Command } from '@/command-menu-item/display/components/Command';
 import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
 import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
-import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/hooks/useDeleteNavigationMenuItem';
-import { useNavigationMenuItemsData } from '@/navigation-menu-item/hooks/useNavigationMenuItemsData';
+import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/common/hooks/useDeleteNavigationMenuItem';
+import { useNavigationMenuItemsData } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemsData';
 import { isDefined } from 'twenty-shared/utils';
 
 export const RemoveFromFavoritesSingleRecordCommand = () => {

packages/twenty-front/src/modules/command-menu-item/server-items/hooks/useCommandMenuContextApi.ts

@@ -7,7 +7,7 @@ import { contextStoreIsPageInEditModeComponentState } from '@/context-store/stat
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
-import { useNavigationMenuItemsData } from '@/navigation-menu-item/hooks/useNavigationMenuItemsData';
+import { useNavigationMenuItemsData } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemsData';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
 import { hasAnySoftDeleteFilterOnViewComponentSelector } from '@/object-record/record-filter/states/hasAnySoftDeleteFilterOnView';

packages/twenty-front/src/modules/command-menu/components/CommandMenuAddToNavDroppableDndKit.tsx

@@ -1,7 +1,7 @@
 import { useDroppable } from '@dnd-kit/react';
 import { type ReactNode } from 'react';
 
-import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/constants/AddToNavSourceDroppableId';
+import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/common/constants/AddToNavSourceDroppableId';
 
 import type { AddToNavDroppableProvided } from '@/command-menu/components/CommandMenuAddToNavDroppableTypes';
 

packages/twenty-front/src/modules/command-menu/components/CommandMenuItemWithAddToNavigationDragDndKit.tsx

@@ -1,7 +1,7 @@
 import { useDraggable } from '@dnd-kit/react';
 import { type ReactNode } from 'react';
 
-import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/constants/AddToNavSourceDroppableId';
+import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/common/constants/AddToNavSourceDroppableId';
 
 type CommandMenuItemWithAddToNavigationDragDndKitProps = {
   id: string;

packages/twenty-front/src/modules/navigation-menu-item/common/graphql/mutations/createNavigationMenuItem.ts

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client';
-import { NAVIGATION_MENU_ITEM_FRAGMENT } from '@/navigation-menu-item/graphql/fragments/navigationMenuItemFragment';
+import { NAVIGATION_MENU_ITEM_FRAGMENT } from '@/navigation-menu-item/common/graphql/fragments/navigationMenuItemFragment';
 
 export const CREATE_NAVIGATION_MENU_ITEM = gql`
   ${NAVIGATION_MENU_ITEM_FRAGMENT}

packages/twenty-front/src/modules/navigation-menu-item/common/graphql/mutations/deleteNavigationMenuItem.ts

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client';
-import { NAVIGATION_MENU_ITEM_FRAGMENT } from '@/navigation-menu-item/graphql/fragments/navigationMenuItemFragment';
+import { NAVIGATION_MENU_ITEM_FRAGMENT } from '@/navigation-menu-item/common/graphql/fragments/navigationMenuItemFragment';
 
 export const DELETE_NAVIGATION_MENU_ITEM = gql`
   ${NAVIGATION_MENU_ITEM_FRAGMENT}

packages/twenty-front/src/modules/navigation-menu-item/common/graphql/mutations/updateNavigationMenuItem.ts

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client';
-import { NAVIGATION_MENU_ITEM_FRAGMENT } from '@/navigation-menu-item/graphql/fragments/navigationMenuItemFragment';
+import { NAVIGATION_MENU_ITEM_FRAGMENT } from '@/navigation-menu-item/common/graphql/fragments/navigationMenuItemFragment';
 
 export const UPDATE_NAVIGATION_MENU_ITEM = gql`
   ${NAVIGATION_MENU_ITEM_FRAGMENT}

packages/twenty-front/src/modules/navigation-menu-item/common/graphql/queries/findManyNavigationMenuItems.ts

@@ -1,4 +1,4 @@
-import { NAVIGATION_MENU_ITEM_QUERY_FRAGMENT } from '@/navigation-menu-item/graphql/fragments/navigationMenuItemQueryFragment';
+import { NAVIGATION_MENU_ITEM_QUERY_FRAGMENT } from '@/navigation-menu-item/common/graphql/fragments/navigationMenuItemQueryFragment';
 import { gql } from '@apollo/client';
 
 export const FIND_MANY_NAVIGATION_MENU_ITEMS = gql`

packages/twenty-front/src/modules/navigation-menu-item/common/graphql/queries/findOneNavigationMenuItem.ts

@@ -1,4 +1,4 @@
-import { NAVIGATION_MENU_ITEM_QUERY_FRAGMENT } from '@/navigation-menu-item/graphql/fragments/navigationMenuItemQueryFragment';
+import { NAVIGATION_MENU_ITEM_QUERY_FRAGMENT } from '@/navigation-menu-item/common/graphql/fragments/navigationMenuItemQueryFragment';
 import { gql } from '@apollo/client';
 
 export const FIND_ONE_NAVIGATION_MENU_ITEM = gql`

packages/twenty-front/src/modules/navigation-menu-item/common/hooks/useCreateNavigationMenuItem.ts

@@ -3,7 +3,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { useMutation } from '@apollo/client/react';
 import { CreateNavigationMenuItemDocument } from '~/generated-metadata/graphql';
 
-import { useNavigationMenuItemsData } from '@/navigation-menu-item/hooks/useNavigationMenuItemsData';
+import { useNavigationMenuItemsData } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemsData';
 import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';

packages/twenty-front/src/modules/navigation-menu-item/common/hooks/useObjectNavItemColor.ts

@@ -1,6 +1,6 @@
 import { isNonEmptyString } from '@sniptt/guards';
 
-import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/common/utils/getStandardObjectIconColor';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 
 export const useObjectNavItemColor = (objectNameSingular: string): string => {

packages/twenty-front/src/modules/navigation-menu-item/common/states/addMenuItemInsertionContextState.ts

@@ -1,4 +1,4 @@
-import type { AddMenuItemInsertionContext } from '@/navigation-menu-item/types/AddMenuItemInsertionContext';
+import type { AddMenuItemInsertionContext } from '@/navigation-menu-item/common/types/AddMenuItemInsertionContext';
 
 import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
 

packages/twenty-front/src/modules/navigation-menu-item/common/states/addToNavPayloadRegistryState.ts

@@ -1,4 +1,4 @@
-import type { AddToNavigationDragPayload } from '@/navigation-menu-item/types/add-to-navigation-drag-payload';
+import type { AddToNavigationDragPayload } from '@/navigation-menu-item/common/types/add-to-navigation-drag-payload';
 
 import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
 

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/computeInsertIndexAndPosition.test.ts

@@ -1,4 +1,4 @@
-import { computeInsertIndexAndPosition } from '@/navigation-menu-item/utils/computeInsertIndexAndPosition';
+import { computeInsertIndexAndPosition } from '@/navigation-menu-item/common/utils/computeInsertIndexAndPosition';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
 describe('computeInsertIndexAndPosition', () => {

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/filterAndSortNavigationMenuItems.test.ts

@@ -1,6 +1,6 @@
 import { NavigationMenuItemType } from 'twenty-shared/types';
 
-import { filterAndSortNavigationMenuItems } from '@/navigation-menu-item/utils/filterAndSortNavigationMenuItems';
+import { filterAndSortNavigationMenuItems } from '@/navigation-menu-item/common/utils/filterAndSortNavigationMenuItems';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { type View } from '@/views/types/View';
 import { ViewKey } from '@/views/types/ViewKey';

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/filterWorkspaceNavigationMenuItems.test.ts

@@ -1,4 +1,4 @@
-import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/utils/filterWorkspaceNavigationMenuItems';
+import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/common/utils/filterWorkspaceNavigationMenuItems';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
 describe('filterWorkspaceNavigationMenuItems', () => {

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/getDropTargetIdFromDestination.test.ts

@@ -1,4 +1,4 @@
-import { getDropTargetIdFromDestination } from '@/navigation-menu-item/utils/getDropTargetIdFromDestination';
+import { getDropTargetIdFromDestination } from '@/navigation-menu-item/common/utils/getDropTargetIdFromDestination';
 
 describe('getDropTargetIdFromDestination', () => {
   it('should return null when destination is null or droppableId is not workspace', () => {

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/getPositionBetween.test.ts

@@ -1,4 +1,4 @@
-import { getPositionBetween } from '@/navigation-menu-item/utils/getPositionBetween';
+import { getPositionBetween } from '@/navigation-menu-item/common/utils/getPositionBetween';
 
 describe('getPositionBetween', () => {
   it('returns next - 1 when only next is defined (insert before)', () => {

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/isLocationMatchingNavigationMenuItem.test.ts

@@ -1,5 +1,5 @@
 import { NavigationMenuItemType } from 'twenty-shared/types';
-import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
+import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/common/utils/isLocationMatchingNavigationMenuItem';
 
 describe('isLocationMatchingNavigationMenuItem', () => {
   it('should return true when item link matches current path (non-view) or current view path (view)', () => {

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/isNavigationMenuItemFolder.test.ts

@@ -1,6 +1,6 @@
 import { NavigationMenuItemType } from 'twenty-shared/types';
 
-import { isNavigationMenuItemFolder } from '@/navigation-menu-item/utils/isNavigationMenuItemFolder';
+import { isNavigationMenuItemFolder } from '@/navigation-menu-item/common/utils/isNavigationMenuItemFolder';
 
 describe('isNavigationMenuItemFolder', () => {
   it('should return true when type is folder', () => {

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/isNavigationMenuItemLink.test.ts

@@ -1,6 +1,6 @@
 import { NavigationMenuItemType } from 'twenty-shared/types';
 
-import { isNavigationMenuItemLink } from '@/navigation-menu-item/utils/isNavigationMenuItemLink';
+import { isNavigationMenuItemLink } from '@/navigation-menu-item/common/utils/isNavigationMenuItemLink';
 
 describe('isNavigationMenuItemLink', () => {
   it('should return true when type is link', () => {

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/orderFoldersForCreation.test.ts

@@ -1,4 +1,4 @@
-import { orderFoldersForCreation } from '@/navigation-menu-item/utils/orderFoldersForCreation';
+import { orderFoldersForCreation } from '@/navigation-menu-item/common/utils/orderFoldersForCreation';
 
 describe('orderFoldersForCreation', () => {
   it('returns empty array for empty input', () => {

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/recordIdentifierToObjectRecordIdentifier.test.ts

@@ -1,4 +1,4 @@
-import { recordIdentifierToObjectRecordIdentifier } from '@/navigation-menu-item/utils/recordIdentifierToObjectRecordIdentifier';
+import { recordIdentifierToObjectRecordIdentifier } from '@/navigation-menu-item/common/utils/recordIdentifierToObjectRecordIdentifier';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 

packages/twenty-front/src/modules/navigation-menu-item/common/utils/__tests__/validateAndExtractWorkspaceFolderId.test.ts

@@ -1,7 +1,7 @@
 import {
   matchesWorkspaceFolderId,
   validateAndExtractWorkspaceFolderId,
-} from '@/navigation-menu-item/utils/validateAndExtractWorkspaceFolderId';
+} from '@/navigation-menu-item/common/utils/validateAndExtractWorkspaceFolderId';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
 describe('matchesWorkspaceFolderId', () => {

packages/twenty-front/src/modules/navigation-menu-item/common/utils/buildCreateNavigationMenuItemInput.ts

@@ -5,9 +5,9 @@ import type {
 
 import { isDefined } from 'twenty-shared/utils';
 
-import { isNavigationMenuItemFolder } from '@/navigation-menu-item/utils/isNavigationMenuItemFolder';
-import { isNavigationMenuItemLink } from '@/navigation-menu-item/utils/isNavigationMenuItemLink';
-import { isNavigationMenuItemObject } from '@/navigation-menu-item/utils/isNavigationMenuItemObject';
+import { isNavigationMenuItemFolder } from '@/navigation-menu-item/common/utils/isNavigationMenuItemFolder';
+import { isNavigationMenuItemLink } from '@/navigation-menu-item/common/utils/isNavigationMenuItemLink';
+import { isNavigationMenuItemObject } from '@/navigation-menu-item/common/utils/isNavigationMenuItemObject';
 
 export const buildCreateNavigationMenuItemInput = (
   draftItem: NavigationMenuItem,

packages/twenty-front/src/modules/navigation-menu-item/common/utils/getDndKitDropTargetId.ts

@@ -1,4 +1,4 @@
-import { DND_KIT_DROP_TARGET_ID_SEPARATOR } from '@/navigation-menu-item/constants/DndKitDropTargetIdSeparator';
+import { DND_KIT_DROP_TARGET_ID_SEPARATOR } from '@/navigation-menu-item/common/constants/DndKitDropTargetIdSeparator';
 
 export const getDndKitDropTargetId = (
   droppableId: string,

packages/twenty-front/src/modules/navigation-menu-item/common/utils/getDropTargetIdFromDestination.ts

@@ -1,6 +1,6 @@
-import { NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants';
-import { isWorkspaceDroppableId } from '@/navigation-menu-item/utils/isWorkspaceDroppableId';
-import { validateAndExtractWorkspaceFolderId } from '@/navigation-menu-item/utils/validateAndExtractWorkspaceFolderId';
+import { NavigationSections } from '@/navigation-menu-item/common/constants/NavigationSections.constants';
+import { isWorkspaceDroppableId } from '@/navigation-menu-item/common/utils/isWorkspaceDroppableId';
+import { validateAndExtractWorkspaceFolderId } from '@/navigation-menu-item/common/utils/validateAndExtractWorkspaceFolderId';
 import type { DropResult } from '@hello-pangea/dnd';
 
 export const getDropTargetIdFromDestination = (

packages/twenty-front/src/modules/navigation-menu-item/common/utils/getEffectiveNavigationMenuItemColor.ts

@@ -1,7 +1,7 @@
 import { isNonEmptyString } from '@sniptt/guards';
 
-import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
-import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorLink';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/common/constants/NavigationMenuItemDefaultColorFolder';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK } from '@/navigation-menu-item/common/constants/NavigationMenuItemDefaultColorLink';
 import { NavigationMenuItemType } from 'twenty-shared/types';
 
 export const getEffectiveNavigationMenuItemColor = (

packages/twenty-front/src/modules/navigation-menu-item/common/utils/getFavoritesDropTargetIdFromDestination.ts

@@ -1,5 +1,5 @@
-import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
-import { NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants';
+import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/common/constants/NavigationMenuItemDroppableIds';
+import { NavigationSections } from '@/navigation-menu-item/common/constants/NavigationSections.constants';
 import type { DropResult } from '@hello-pangea/dnd';
 
 const FOLDER_PREFIX = 'folder-';

packages/twenty-front/src/modules/navigation-menu-item/common/utils/getNavigationMenuItemIconBorderColor.ts

@@ -0,0 +1,8 @@
+import type { ThemeColor } from 'twenty-ui/theme';
+
+import { getColorFromTheme } from '@/navigation-menu-item/common/utils/getColorFromTheme';
+import { COLOR_SHADE_BORDER } from '@/navigation-menu-item/common/utils/navigationMenuItemIconColorShadeBorder';
+
+export const getNavigationMenuItemIconBorderColor = (
+  themeColor: ThemeColor,
+): string => getColorFromTheme(themeColor, COLOR_SHADE_BORDER);

packages/twenty-front/src/modules/navigation-menu-item/common/utils/getNavigationMenuItemIconStyleFromColor.ts

@@ -0,0 +1,18 @@
+import { DEFAULT_NAV_ITEM_ICON_COLOR } from '@/navigation-menu-item/common/constants/NavigationMenuItemDefaultIconColor.constant';
+import { getColorFromTheme } from '@/navigation-menu-item/common/utils/getColorFromTheme';
+import { COLOR_SHADE_BACKGROUND } from '@/navigation-menu-item/common/utils/navigationMenuItemIconColorShadeBackground';
+import { COLOR_SHADE_BORDER } from '@/navigation-menu-item/common/utils/navigationMenuItemIconColorShadeBorder';
+import { COLOR_SHADE_ICON } from '@/navigation-menu-item/common/utils/navigationMenuItemIconColorShadeIcon';
+import { type NavigationMenuItemIconStyle } from '@/navigation-menu-item/common/utils/navigationMenuItemIconStyle';
+import { parseThemeColor } from '@/navigation-menu-item/common/utils/parseThemeColor';
+
+export const getNavigationMenuItemIconStyleFromColor = (
+  color: string | null | undefined,
+): NavigationMenuItemIconStyle => {
+  const themeColor = parseThemeColor(color ?? DEFAULT_NAV_ITEM_ICON_COLOR);
+  return {
+    backgroundColor: getColorFromTheme(themeColor, COLOR_SHADE_BACKGROUND),
+    iconColor: getColorFromTheme(themeColor, COLOR_SHADE_ICON),
+    borderColor: getColorFromTheme(themeColor, COLOR_SHADE_BORDER),
+  };
+};

packages/twenty-front/src/modules/navigation-menu-item/common/utils/getStandardObjectIconColor.ts

@@ -1,6 +1,6 @@
 import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme';
 
-import { DEFAULT_NAV_ITEM_ICON_COLOR } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultIconColor.constant';
+import { DEFAULT_NAV_ITEM_ICON_COLOR } from '@/navigation-menu-item/common/constants/NavigationMenuItemDefaultIconColor.constant';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 
 const STANDARD_OBJECT_ICON_COLOR: Partial<

packages/twenty-front/src/modules/navigation-menu-item/common/utils/isWorkspaceDroppableId.ts

@@ -1,6 +1,6 @@
 import { isDefined } from 'twenty-shared/utils';
 
-import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
+import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/common/constants/NavigationMenuItemDroppableIds';
 
 export const isWorkspaceDroppableId = (
   droppableId: string | null | undefined,

packages/twenty-front/src/modules/navigation-menu-item/common/utils/parseThemeColor.ts

@@ -1,7 +1,7 @@
 import { type ThemeColor } from 'twenty-ui/theme';
 import { themeColorSchema } from 'twenty-ui/utilities';
 
-import { DEFAULT_NAV_ITEM_ICON_COLOR } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultIconColor.constant';
+import { DEFAULT_NAV_ITEM_ICON_COLOR } from '@/navigation-menu-item/common/constants/NavigationMenuItemDefaultIconColor.constant';
 
 export const parseThemeColor = (
   color: string | null | undefined,

packages/twenty-front/src/modules/navigation-menu-item/common/utils/validateAndExtractWorkspaceFolderId.ts

@@ -2,7 +2,7 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { CustomError, isDefined } from 'twenty-shared/utils';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
-import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
+import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/common/constants/NavigationMenuItemDroppableIds';
 
 export const matchesWorkspaceFolderId = (
   item: NavigationMenuItem,

packages/twenty-front/src/modules/navigation-menu-item/components/CurrentWorkspaceMemberNavigationMenuItemFoldersDispatcher.tsx

@@ -1,19 +0,0 @@
-import { CurrentWorkspaceMemberNavigationMenuItemFolders } from '@/navigation-menu-item/components/CurrentWorkspaceMemberNavigationMenuItemFolders';
-import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
-import { FavoritesDragDropProviderContent } from '@/navigation/components/FavoritesDragDropProviderContent';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { AnimatedEaseInOut } from 'twenty-ui/utilities';
-
-export const CurrentWorkspaceMemberNavigationMenuItemFoldersDispatcher = () => {
-  const isNavigationMenuInEditMode = useAtomStateValue(
-    isNavigationMenuInEditModeState,
-  );
-
-  return (
-    <AnimatedEaseInOut isOpen={!isNavigationMenuInEditMode} initial>
-      <FavoritesDragDropProviderContent>
-        <CurrentWorkspaceMemberNavigationMenuItemFolders />
-      </FavoritesDragDropProviderContent>
-    </AnimatedEaseInOut>
-  );
-};

packages/twenty-front/src/modules/navigation-menu-item/components/CurrentWorkspaceMemberOrphanNavigationMenuItems.tsx

@@ -1,138 +0,0 @@
-import { styled } from '@linaria/react';
-import { useContext } from 'react';
-import { useLocation } from 'react-router-dom';
-import { IconHeartOff } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-
-import { NavigationItemDropTarget } from '@/navigation-menu-item/components/NavigationItemDropTarget';
-import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/NavigationMenuItemDroppable';
-import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
-import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
-import { NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants';
-import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
-import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/hooks/useDeleteNavigationMenuItem';
-import { useSortedNavigationMenuItems } from '@/navigation-menu-item/hooks/useSortedNavigationMenuItems';
-import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
-import { getNavigationMenuItemComputedLink } from '@/navigation-menu-item/utils/getNavigationMenuItemComputedLink';
-import { getNavigationMenuItemLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemLabel';
-import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/utils/getNavigationMenuItemObjectNameSingular';
-import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
-import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
-import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { viewsSelector } from '@/views/states/selectors/viewsSelector';
-import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
-import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
-
-const StyledEmptyContainer = styled.div`
-  width: 100%;
-`;
-
-const StyledOrphanNavigationMenuItemsContainer = styled.div`
-  margin-bottom: ${themeCssVariables.betweenSiblingsGap};
-`;
-
-export const CurrentWorkspaceMemberOrphanNavigationMenuItems = () => {
-  const objectMetadataItems = useAtomStateValue(objectMetadataItemsSelector);
-  const views = useAtomStateValue(viewsSelector);
-  const { navigationMenuItemsSorted } = useSortedNavigationMenuItems();
-  const { deleteNavigationMenuItem } = useDeleteNavigationMenuItem();
-  const currentPath = useLocation().pathname;
-  const currentViewPath = useLocation().pathname + useLocation().search;
-  const { isDragging } = useContext(NavigationMenuItemDragContext);
-
-  const orphanNavigationMenuItems = navigationMenuItemsSorted.filter(
-    (item) => !item.folderId,
-  );
-
-  return (
-    <NavigationMenuItemDroppable
-      droppableId={NavigationMenuItemDroppableIds.ORPHAN_NAVIGATION_MENU_ITEMS}
-      isWorkspaceSection={false}
-    >
-      {orphanNavigationMenuItems.length > 0 ? (
-        <>
-          {orphanNavigationMenuItems.map((navigationMenuItem, index) => {
-            const label = getNavigationMenuItemLabel(
-              navigationMenuItem,
-              objectMetadataItems,
-              views,
-            );
-            const computedLink = getNavigationMenuItemComputedLink(
-              navigationMenuItem,
-              objectMetadataItems,
-              views,
-            );
-            const objectNameSingular = getNavigationMenuItemObjectNameSingular(
-              navigationMenuItem,
-              objectMetadataItems,
-              views,
-            );
-
-            return (
-              <NavigationItemDropTarget
-                key={navigationMenuItem.id}
-                folderId={null}
-                index={index}
-                sectionId={NavigationSections.FAVORITES}
-              >
-                <DraggableItem
-                  draggableId={navigationMenuItem.id}
-                  index={index}
-                  isInsideScrollableContainer={true}
-                  itemComponent={
-                    <StyledOrphanNavigationMenuItemsContainer>
-                      <NavigationDrawerItem
-                        secondaryLabel={getNavigationMenuItemSecondaryLabel({
-                          objectMetadataItems,
-                          navigationMenuItemObjectNameSingular:
-                            objectNameSingular ?? '',
-                        })}
-                        label={label}
-                        Icon={() => (
-                          <NavigationMenuItemIcon
-                            navigationMenuItem={navigationMenuItem}
-                          />
-                        )}
-                        iconColor={getEffectiveNavigationMenuItemColor(
-                          navigationMenuItem,
-                        )}
-                        active={isLocationMatchingNavigationMenuItem(
-                          currentPath,
-                          currentViewPath,
-                          navigationMenuItem.type,
-                          computedLink,
-                        )}
-                        to={isDragging ? undefined : computedLink}
-                        rightOptions={
-                          <LightIconButton
-                            Icon={IconHeartOff}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              deleteNavigationMenuItem(navigationMenuItem.id);
-                            }}
-                            accent="tertiary"
-                          />
-                        }
-                        isDragging={isDragging}
-                        triggerEvent="CLICK"
-                      />
-                    </StyledOrphanNavigationMenuItemsContainer>
-                  }
-                />
-              </NavigationItemDropTarget>
-            );
-          })}
-          <NavigationItemDropTarget
-            folderId={null}
-            index={orphanNavigationMenuItems.length}
-            sectionId={NavigationSections.FAVORITES}
-          />
-        </>
-      ) : (
-        <StyledEmptyContainer style={{ height: isDragging ? '24px' : '1px' }} />
-      )}
-    </NavigationMenuItemDroppable>
-  );
-};

packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemFolderContent.tsx

@@ -1,104 +0,0 @@
-import { Droppable } from '@hello-pangea/dnd';
-import { IconHeartOff } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
-import { type NavigationMenuItem } from '~/generated-metadata/graphql';
-
-import { NavigationMenuItemBackButton } from '@/navigation-menu-item/components/NavigationMenuItemBackButton';
-import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
-import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/hooks/useDeleteNavigationMenuItem';
-import { getNavigationMenuItemComputedLink } from '@/navigation-menu-item/utils/getNavigationMenuItemComputedLink';
-import { getNavigationMenuItemLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemLabel';
-import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/utils/getNavigationMenuItemObjectNameSingular';
-import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
-import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
-import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
-import { viewsSelector } from '@/views/states/selectors/viewsSelector';
-
-type NavigationMenuItemFolderContentProps = {
-  folderId: string;
-  folderName: string;
-  navigationMenuItems: NavigationMenuItem[];
-};
-
-export const NavigationMenuItemFolderContent = ({
-  folderName,
-  folderId,
-  navigationMenuItems,
-}: NavigationMenuItemFolderContentProps) => {
-  const objectMetadataItems = useAtomStateValue(objectMetadataItemsSelector);
-  const views = useAtomStateValue(viewsSelector);
-  const { deleteNavigationMenuItem } = useDeleteNavigationMenuItem();
-
-  return (
-    <>
-      <NavigationMenuItemBackButton folderName={folderName} />
-      <Droppable droppableId={`folder-${folderId}`}>
-        {(provided) => (
-          <div
-            ref={provided.innerRef}
-            // oxlint-disable-next-line react/jsx-props-no-spreading
-            {...provided.droppableProps}
-          >
-            {navigationMenuItems.map((navigationMenuItem, index) => {
-              const label = getNavigationMenuItemLabel(
-                navigationMenuItem,
-                objectMetadataItems,
-                views,
-              );
-              const computedLink = getNavigationMenuItemComputedLink(
-                navigationMenuItem,
-                objectMetadataItems,
-                views,
-              );
-              const objectNameSingular =
-                getNavigationMenuItemObjectNameSingular(
-                  navigationMenuItem,
-                  objectMetadataItems,
-                  views,
-                );
-
-              return (
-                <DraggableItem
-                  key={navigationMenuItem.id}
-                  draggableId={navigationMenuItem.id}
-                  index={index}
-                  isInsideScrollableContainer
-                  itemComponent={
-                    <NavigationDrawerItem
-                      secondaryLabel={getNavigationMenuItemSecondaryLabel({
-                        objectMetadataItems,
-                        navigationMenuItemObjectNameSingular:
-                          objectNameSingular ?? '',
-                      })}
-                      label={label}
-                      Icon={() => (
-                        <NavigationMenuItemIcon
-                          navigationMenuItem={navigationMenuItem}
-                        />
-                      )}
-                      rightOptions={
-                        <LightIconButton
-                          Icon={IconHeartOff}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            deleteNavigationMenuItem(navigationMenuItem.id);
-                          }}
-                          accent="tertiary"
-                        />
-                      }
-                      triggerEvent="CLICK"
-                      to={computedLink}
-                    />
-                  }
-                />
-              );
-            })}
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </>
-  );
-};

packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemDisplay.tsx

@@ -1,13 +1,12 @@
 import { NavigationMenuItemType } from 'twenty-shared/types';
-import { NavigationDrawerSectionForWorkspaceItemFolderContent } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemFolderContent';
-import { NavigationDrawerSectionForWorkspaceItemLinkContent } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemLinkContent';
-import { NavigationDrawerSectionForWorkspaceItemObjectContent } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemObjectContent';
-import type { WorkspaceSectionItemContentProps } from '@/object-metadata/components/WorkspaceSectionItemContentProps';
+import { NavigationMenuItemFolderDisplay } from '@/navigation-menu-item/display/folder/components/NavigationMenuItemFolderDisplay';
+import { NavigationMenuItemLinkDisplay } from '@/navigation-menu-item/display/link/components/NavigationMenuItemLinkDisplay';
+import { NavigationMenuItemObjectDisplay } from '@/navigation-menu-item/display/object/components/NavigationMenuItemObjectDisplay';
+import type { WorkspaceSectionItemContentProps } from '@/navigation-menu-item/display/sections/types/WorkspaceSectionItemContentProps';
 
-type NavigationDrawerSectionForWorkspaceItemContentProps =
-  WorkspaceSectionItemContentProps;
+type NavigationMenuItemDisplayProps = WorkspaceSectionItemContentProps;
 
-export const NavigationDrawerSectionForWorkspaceItemContent = ({
+export const NavigationMenuItemDisplay = ({
   item,
   editModeProps,
   isDragging,
@@ -17,11 +16,11 @@ export const NavigationDrawerSectionForWorkspaceItemContent = ({
   onNavigationMenuItemClick,
   onActiveObjectMetadataItemClick,
   readOnly,
-}: NavigationDrawerSectionForWorkspaceItemContentProps) => {
+}: NavigationMenuItemDisplayProps) => {
   switch (item.type) {
     case NavigationMenuItemType.FOLDER:
       return (
-        <NavigationDrawerSectionForWorkspaceItemFolderContent
+        <NavigationMenuItemFolderDisplay
           item={item}
           editModeProps={editModeProps}
           isDragging={isDragging}
@@ -34,7 +33,7 @@ export const NavigationDrawerSectionForWorkspaceItemContent = ({
       );
     case NavigationMenuItemType.LINK:
       return (
-        <NavigationDrawerSectionForWorkspaceItemLinkContent
+        <NavigationMenuItemLinkDisplay
           item={item}
           editModeProps={editModeProps}
           isDragging={isDragging}
@@ -48,7 +47,7 @@ export const NavigationDrawerSectionForWorkspaceItemContent = ({
       );
     default:
       return (
-        <NavigationDrawerSectionForWorkspaceItemObjectContent
+        <NavigationMenuItemObjectDisplay
           item={item}
           editModeProps={editModeProps}
           isDragging={isDragging}

packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemIcon.tsx

@@ -5,16 +5,16 @@ import { Avatar, IconLink, IconWorld, useIcons } from 'twenty-ui/display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
-import { LinkIconWithLinkOverlay } from '@/navigation-menu-item/components/LinkIconWithLinkOverlay';
-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
-import { ObjectIconWithViewOverlay } from '@/navigation-menu-item/components/ObjectIconWithViewOverlay';
-import { useObjectNavItemColor } from '@/navigation-menu-item/hooks/useObjectNavItemColor';
-import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
-import { getNavigationMenuItemComputedLink } from '@/navigation-menu-item/utils/getNavigationMenuItemComputedLink';
-import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/utils/getNavigationMenuItemIconStyleFromColor';
-import { getNavigationMenuItemLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemLabel';
-import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/utils/getNavigationMenuItemObjectNameSingular';
-import { recordIdentifierToObjectRecordIdentifier } from '@/navigation-menu-item/utils/recordIdentifierToObjectRecordIdentifier';
+import { LinkIconWithLinkOverlay } from '@/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay';
+import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/display/components/NavigationMenuItemIconContainer';
+import { ObjectIconWithViewOverlay } from '@/navigation-menu-item/display/view/components/ObjectIconWithViewOverlay';
+import { useObjectNavItemColor } from '@/navigation-menu-item/common/hooks/useObjectNavItemColor';
+import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/common/utils/getEffectiveNavigationMenuItemColor';
+import { getNavigationMenuItemComputedLink } from '@/navigation-menu-item/display/utils/getNavigationMenuItemComputedLink';
+import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/common/utils/getNavigationMenuItemIconStyleFromColor';
+import { getNavigationMenuItemLabel } from '@/navigation-menu-item/display/utils/getNavigationMenuItemLabel';
+import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/display/object/utils/getNavigationMenuItemObjectNameSingular';
+import { recordIdentifierToObjectRecordIdentifier } from '@/navigation-menu-item/common/utils/recordIdentifierToObjectRecordIdentifier';
 import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
 import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';

packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemStyleIcon.tsx

@@ -1,6 +1,6 @@
 import type { IconComponent } from 'twenty-ui/display';
-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
-import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/utils/getNavigationMenuItemIconStyleFromColor';
+import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/display/components/NavigationMenuItemIconContainer';
+import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/common/utils/getNavigationMenuItemIconStyleFromColor';
 import { useContext } from 'react';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/navigation-menu-item/display/dnd/components/AddToNavigationDragHandle.tsx

@@ -4,10 +4,10 @@ import { isDefined } from 'twenty-shared/utils';
 import { IconGripVertical, type IconComponent } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/display/components/NavigationMenuItemStyleIcon';
 import { NavigationMenuItemType } from 'twenty-shared/types';
-import type { AddToNavigationDragPayload } from '@/navigation-menu-item/types/add-to-navigation-drag-payload';
-import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
+import type { AddToNavigationDragPayload } from '@/navigation-menu-item/common/types/add-to-navigation-drag-payload';
+import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/common/utils/getEffectiveNavigationMenuItemColor';
 
 const StyledIconSlot = styled.div<{
   $hasFixedSize: boolean;

packages/twenty-front/src/modules/navigation-menu-item/display/dnd/components/NavigationItemDropTarget.tsx

@@ -2,8 +2,8 @@ import { styled } from '@linaria/react';
 import { type ReactNode, useContext } from 'react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-import { type NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants';
-import { NavigationDropTargetContext } from '@/navigation-menu-item/contexts/NavigationDropTargetContext';
+import { type NavigationSections } from '@/navigation-menu-item/common/constants/NavigationSections.constants';
+import { NavigationDropTargetContext } from '@/navigation-menu-item/common/contexts/NavigationDropTargetContext';
 
 const StyledDropTarget = styled.div<{ $compact?: boolean }>`
   min-height: ${({ $compact }) =>

packages/twenty-front/src/modules/navigation-menu-item/display/dnd/components/NavigationMenuItemDroppable.tsx

@@ -2,7 +2,7 @@ import { Droppable } from '@hello-pangea/dnd';
 import { styled } from '@linaria/react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection';
+import { useIsDropDisabledForSection } from '@/navigation-menu-item/display/dnd/hooks/useIsDropDisabledForSection';
 
 type NavigationMenuItemDroppableProps = {
   droppableId: string;

packages/twenty-front/src/modules/navigation-menu-item/display/dnd/components/WorkspaceDndKitDroppableSlot.tsx

@@ -3,7 +3,7 @@ import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-import { getDndKitDropTargetId } from '@/navigation-menu-item/utils/getDndKitDropTargetId';
+import { getDndKitDropTargetId } from '@/navigation-menu-item/common/utils/getDndKitDropTargetId';
 import type { DroppableData } from '@/navigation/types/workspaceDndKitDroppableData';
 
 const StyledSlotWrapper = styled.div<{ $empty: boolean }>`

packages/twenty-front/src/modules/navigation-menu-item/display/dnd/components/WorkspaceDndKitSortableItem.tsx

@@ -3,7 +3,7 @@ import { useSortable } from '@dnd-kit/react/sortable';
 import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
 
-import { SortableDropTargetRefContext } from '@/navigation-menu-item/contexts/SortableDropTargetRefContext';
+import { SortableDropTargetRefContext } from '@/navigation-menu-item/common/contexts/SortableDropTargetRefContext';
 
 const SORTABLE_COLLISION_PRIORITY = 3;
 

packages/twenty-front/src/modules/navigation-menu-item/display/dnd/hooks/useHandleAddToNavigationDrop.ts

@@ -4,23 +4,23 @@ import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconFolder, IconLink, useIcons } from 'twenty-ui/display';
 
-import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/constants/AddToNavSourceDroppableId';
+import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/common/constants/AddToNavSourceDroppableId';
 import { NavigationMenuItemType } from 'twenty-shared/types';
-import { useAddFolderToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddFolderToNavigationMenuDraft';
-import { useAddLinkToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddLinkToNavigationMenuDraft';
-import { useAddObjectToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddObjectToNavigationMenuDraft';
-import { useAddRecordToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddRecordToNavigationMenuDraft';
-import { useAddViewToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddViewToNavigationMenuDraft';
-import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/hooks/useNavigationMenuItemsDraftState';
-import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/hooks/useOpenNavigationMenuItemInSidePanel';
-import { addToNavPayloadRegistryState } from '@/navigation-menu-item/states/addToNavPayloadRegistryState';
-import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
-import { navigationMenuItemsDraftState } from '@/navigation-menu-item/states/navigationMenuItemsDraftState';
-import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsState';
-import { getObjectMetadataIdsInDraft } from '@/navigation-menu-item/utils/getObjectMetadataIdsInDraft';
-import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
-import { isWorkspaceDroppableId } from '@/navigation-menu-item/utils/isWorkspaceDroppableId';
-import { validateAndExtractWorkspaceFolderId } from '@/navigation-menu-item/utils/validateAndExtractWorkspaceFolderId';
+import { useAddFolderToNavigationMenuDraft } from '@/navigation-menu-item/edit/folder/hooks/useAddFolderToNavigationMenuDraft';
+import { useAddLinkToNavigationMenuDraft } from '@/navigation-menu-item/edit/link/hooks/useAddLinkToNavigationMenuDraft';
+import { useAddObjectToNavigationMenuDraft } from '@/navigation-menu-item/edit/object/hooks/useAddObjectToNavigationMenuDraft';
+import { useAddRecordToNavigationMenuDraft } from '@/navigation-menu-item/edit/record/hooks/useAddRecordToNavigationMenuDraft';
+import { useAddViewToNavigationMenuDraft } from '@/navigation-menu-item/edit/view/hooks/useAddViewToNavigationMenuDraft';
+import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState';
+import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel';
+import { addToNavPayloadRegistryState } from '@/navigation-menu-item/common/states/addToNavPayloadRegistryState';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/common/states/isNavigationMenuInEditModeState';
+import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState';
+import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/common/states/openNavigationMenuItemFolderIdsState';
+import { getObjectMetadataIdsInDraft } from '@/navigation-menu-item/common/utils/getObjectMetadataIdsInDraft';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/common/utils/getStandardObjectIconColor';
+import { isWorkspaceDroppableId } from '@/navigation-menu-item/common/utils/isWorkspaceDroppableId';
+import { validateAndExtractWorkspaceFolderId } from '@/navigation-menu-item/common/utils/validateAndExtractWorkspaceFolderId';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';

packages/twenty-front/src/modules/navigation-menu-item/display/dnd/hooks/useHandleNavigationMenuItemDragAndDrop.ts

@@ -1,16 +1,16 @@
 import { type OnDragEndResponder } from '@hello-pangea/dnd';
 
-import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
-import { isWorkspaceDroppableId } from '@/navigation-menu-item/utils/isWorkspaceDroppableId';
-import { useSortedNavigationMenuItems } from '@/navigation-menu-item/hooks/useSortedNavigationMenuItems';
-import { useUpdateNavigationMenuItem } from '@/navigation-menu-item/hooks/useUpdateNavigationMenuItem';
-import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsState';
+import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/common/constants/NavigationMenuItemDroppableIds';
+import { isWorkspaceDroppableId } from '@/navigation-menu-item/common/utils/isWorkspaceDroppableId';
+import { useSortedNavigationMenuItems } from '@/navigation-menu-item/display/hooks/useSortedNavigationMenuItems';
+import { useUpdateNavigationMenuItem } from '@/navigation-menu-item/common/hooks/useUpdateNavigationMenuItem';
+import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/common/states/openNavigationMenuItemFolderIdsState';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { calculateNewPosition } from '@/ui/layout/draggable-list/utils/calculateNewPosition';
 import { FOLDER_DROPPABLE_IDS } from '@/ui/layout/draggable-list/utils/folderDroppableIds';
 import { validateAndExtractFolderId } from '@/ui/layout/draggable-list/utils/validateAndExtractFolderId';
 
-import { useNavigationMenuItemsData } from './useNavigationMenuItemsData';
+import { useNavigationMenuItemsData } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemsData';
 
 export const useHandleNavigationMenuItemDragAndDrop = () => {
   const { navigationMenuItems } = useNavigationMenuItemsData();

packages/twenty-front/src/modules/navigation-menu-item/display/dnd/hooks/useHandleWorkspaceNavigationMenuItemDragAndDrop.ts

@@ -2,20 +2,20 @@ import { type OnDragEndResponder } from '@hello-pangea/dnd';
 import { useStore } from 'jotai';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
-import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
-import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
-import { navigationMenuItemsDraftState } from '@/navigation-menu-item/states/navigationMenuItemsDraftState';
-import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsState';
-import { getPositionBetween } from '@/navigation-menu-item/utils/getPositionBetween';
-import { isNavigationMenuItemFolder } from '@/navigation-menu-item/utils/isNavigationMenuItemFolder';
+import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/common/constants/NavigationMenuItemDroppableIds';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/common/states/isNavigationMenuInEditModeState';
+import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState';
+import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/common/states/openNavigationMenuItemFolderIdsState';
+import { getPositionBetween } from '@/navigation-menu-item/common/utils/getPositionBetween';
+import { isNavigationMenuItemFolder } from '@/navigation-menu-item/common/utils/isNavigationMenuItemFolder';
 import {
   matchesWorkspaceFolderId,
   validateAndExtractWorkspaceFolderId,
-} from '@/navigation-menu-item/utils/validateAndExtractWorkspaceFolderId';
+} from '@/navigation-menu-item/common/utils/validateAndExtractWorkspaceFolderId';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 
 import { isDefined } from 'twenty-shared/utils';
-import { useNavigationMenuItemsData } from './useNavigationMenuItemsData';
+import { useNavigationMenuItemsData } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemsData';
 
 export const useHandleWorkspaceNavigationMenuItemDragAndDrop = () => {
   const store = useStore();

packages/twenty-front/src/modules/navigation-menu-item/display/dnd/hooks/useIsDropDisabledForSection.ts

@@ -1,6 +1,6 @@
-import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/constants/AddToNavSourceDroppableId';
-import { NavigationDragSourceContext } from '@/navigation-menu-item/contexts/NavigationDragSourceContext';
-import { isWorkspaceDroppableId } from '@/navigation-menu-item/utils/isWorkspaceDroppableId';
+import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/common/constants/AddToNavSourceDroppableId';
+import { NavigationDragSourceContext } from '@/navigation-menu-item/common/contexts/NavigationDragSourceContext';
+import { isWorkspaceDroppableId } from '@/navigation-menu-item/common/utils/isWorkspaceDroppableId';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';