From 4a099ed097a19d2bd028d4b566db2cf3b35f675f Mon Sep 17 00:00:00 2001 From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com> Date: Wed, 25 Mar 2026 03:58:40 +0530 Subject: [PATCH] Use side panel sub-pages for add-to-folder flow (#18872) https://github.com/user-attachments/assets/a31b8523-2d0a-4a02-bcd9-5548c906b7cc --------- Co-authored-by: Charles Bochet --- .../hooks/useExitLayoutCustomizationMode.ts | 10 +-- .../addMenuItemInsertionContextState.ts | 9 --- ...pendingInsertionNavigationMenuItemState.ts | 9 +++ ...tedNavigationMenuItemIdInEditModeState.ts} | 4 +- .../types/AddMenuItemInsertionContext.ts | 5 -- .../PendingInsertionNavigationMenuItem.ts | 4 + .../components/NavigationMenuItemDisplay.tsx | 4 - .../components/NavigationMenuItemFolder.tsx | 3 - .../NavigationMenuItemFolderDnd.tsx | 33 +++----- .../NavigationMenuItemFolderSubItem.tsx | 9 +-- .../useIsNavigationMenuItemEditHighlighted.ts | 29 +++++++ .../NavigationMenuItemSectionContentProps.ts | 1 - ...avigationMenuItemSectionListDndKitProps.ts | 1 - .../workspace/components/WorkspaceSection.tsx | 14 ++-- .../components/WorkspaceSectionContainer.tsx | 1 - .../components/WorkspaceSectionListDndKit.tsx | 2 - .../WorkspaceSectionListReadOnly.tsx | 1 - .../WorkspaceSectionAddMenuItemButton.tsx | 25 +++--- .../edit/hooks/useOpenAddItemToFolderPage.ts | 32 ++++---- .../useOpenNavigationMenuItemInSidePanel.ts | 13 ++- .../useSelectedNavigationMenuItemEditItem.ts | 10 +-- .../SidePanelNavigationMenuItemEditPage.tsx | 24 +++--- .../SidePanelNewSidebarItemMainMenu.tsx | 15 ++-- .../SidePanelNewSidebarItemObjectSubPage.tsx | 24 +++--- ...ewSidebarItemObjectSystemPickerSubPage.tsx | 24 +++--- .../SidePanelNewSidebarItemRecordItem.tsx | 24 +++--- .../SidePanelNewSidebarItemRecordSubPage.tsx | 9 +-- ...dePanelNewSidebarItemViewPickerSubView.tsx | 26 +++--- .../hooks/useAddFolderToNavigationMenu.ts | 23 +++--- .../hooks/useAddLinkToNavigationMenu.ts | 23 +++--- .../hooks/useFolderPickerSelectionData.ts | 12 +-- ...seNavigationMenuItemEditOrganizeActions.ts | 80 +++++++++---------- .../components/SidePanelFolderInfo.tsx | 10 +-- .../components/SidePanelLinkInfo.tsx | 10 +-- .../components/SidePanelPageInfo.tsx | 8 +- .../SidePanelNewSidebarItemFlowSubPages.ts | 11 +++ .../constants/SidePanelSubPagesConfig.tsx | 2 + .../side-panel/hooks/useSidePanelMenu.ts | 4 +- ...PageStackForActiveSidePanelPageSelector.ts | 22 +++++ .../side-panel/types/SidePanelSubPages.ts | 1 + .../utils/getSidePanelSubPageTitle.ts | 2 + 41 files changed, 289 insertions(+), 284 deletions(-) delete mode 100644 packages/twenty-front/src/modules/navigation-menu-item/common/states/addMenuItemInsertionContextState.ts create mode 100644 packages/twenty-front/src/modules/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState.ts rename packages/twenty-front/src/modules/navigation-menu-item/common/states/{selectedNavigationMenuItemInEditModeState.ts => selectedNavigationMenuItemIdInEditModeState.ts} (50%) delete mode 100644 packages/twenty-front/src/modules/navigation-menu-item/common/types/AddMenuItemInsertionContext.ts create mode 100644 packages/twenty-front/src/modules/navigation-menu-item/common/types/PendingInsertionNavigationMenuItem.ts create mode 100644 packages/twenty-front/src/modules/navigation-menu-item/display/hooks/useIsNavigationMenuItemEditHighlighted.ts create mode 100644 packages/twenty-front/src/modules/side-panel/constants/SidePanelNewSidebarItemFlowSubPages.ts create mode 100644 packages/twenty-front/src/modules/side-panel/states/sidePanelSubPageStackForActiveSidePanelPageSelector.ts diff --git a/packages/twenty-front/src/modules/layout-customization/hooks/useExitLayoutCustomizationMode.ts b/packages/twenty-front/src/modules/layout-customization/hooks/useExitLayoutCustomizationMode.ts index d38c12c8eb..8700c501d4 100644 --- a/packages/twenty-front/src/modules/layout-customization/hooks/useExitLayoutCustomizationMode.ts +++ b/packages/twenty-front/src/modules/layout-customization/hooks/useExitLayoutCustomizationMode.ts @@ -1,7 +1,7 @@ import { activeCustomizationPageLayoutIdsState } from '@/layout-customization/states/activeCustomizationPageLayoutIdsState'; import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState'; import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState'; import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; @@ -15,8 +15,8 @@ export const useExitLayoutCustomizationMode = () => { const setNavigationMenuItemsDraft = useSetAtomState( navigationMenuItemsDraftState, ); - const setSelectedNavigationMenuItemInEditMode = useSetAtomState( - selectedNavigationMenuItemInEditModeState, + const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState( + selectedNavigationMenuItemIdInEditModeState, ); const setIsLayoutCustomizationModeEnabled = useSetAtomState( isLayoutCustomizationModeEnabledState, @@ -24,7 +24,7 @@ export const useExitLayoutCustomizationMode = () => { const exitLayoutCustomizationMode = useCallback(() => { setNavigationMenuItemsDraft(null); - setSelectedNavigationMenuItemInEditMode(null); + setSelectedNavigationMenuItemIdInEditMode(null); store.set(currentPageLayoutIdState.atom, null); store.set(activeCustomizationPageLayoutIdsState.atom, []); @@ -32,7 +32,7 @@ export const useExitLayoutCustomizationMode = () => { closeSidePanelMenu(); }, [ setNavigationMenuItemsDraft, - setSelectedNavigationMenuItemInEditMode, + setSelectedNavigationMenuItemIdInEditMode, setIsLayoutCustomizationModeEnabled, closeSidePanelMenu, store, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/common/states/addMenuItemInsertionContextState.ts b/packages/twenty-front/src/modules/navigation-menu-item/common/states/addMenuItemInsertionContextState.ts deleted file mode 100644 index e3b7c66beb..0000000000 --- a/packages/twenty-front/src/modules/navigation-menu-item/common/states/addMenuItemInsertionContextState.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { AddMenuItemInsertionContext } from '@/navigation-menu-item/common/types/AddMenuItemInsertionContext'; - -import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState'; - -export const addMenuItemInsertionContextState = - createAtomState({ - key: 'addMenuItemInsertionContextState', - defaultValue: null, - }); diff --git a/packages/twenty-front/src/modules/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState.ts b/packages/twenty-front/src/modules/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState.ts new file mode 100644 index 0000000000..64778b184c --- /dev/null +++ b/packages/twenty-front/src/modules/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState.ts @@ -0,0 +1,9 @@ +import type { PendingInsertionNavigationMenuItem } from '@/navigation-menu-item/common/types/PendingInsertionNavigationMenuItem'; + +import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState'; + +export const pendingInsertionNavigationMenuItemState = + createAtomState({ + key: 'pendingInsertionNavigationMenuItemState', + defaultValue: null, + }); diff --git a/packages/twenty-front/src/modules/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState.ts b/packages/twenty-front/src/modules/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState.ts similarity index 50% rename from packages/twenty-front/src/modules/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState.ts rename to packages/twenty-front/src/modules/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState.ts index b3d1814ad8..05d54bbf36 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState.ts @@ -1,8 +1,8 @@ import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState'; -export const selectedNavigationMenuItemInEditModeState = createAtomState< +export const selectedNavigationMenuItemIdInEditModeState = createAtomState< string | null >({ - key: 'selectedNavigationMenuItemInEditModeState', + key: 'selectedNavigationMenuItemIdInEditModeState', defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/navigation-menu-item/common/types/AddMenuItemInsertionContext.ts b/packages/twenty-front/src/modules/navigation-menu-item/common/types/AddMenuItemInsertionContext.ts deleted file mode 100644 index 54d3571c9d..0000000000 --- a/packages/twenty-front/src/modules/navigation-menu-item/common/types/AddMenuItemInsertionContext.ts +++ /dev/null @@ -1,5 +0,0 @@ -export type AddMenuItemInsertionContext = { - targetFolderId: string | null; - targetIndex: number; - disableDrag?: boolean; -}; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/common/types/PendingInsertionNavigationMenuItem.ts b/packages/twenty-front/src/modules/navigation-menu-item/common/types/PendingInsertionNavigationMenuItem.ts new file mode 100644 index 0000000000..197ff53b84 --- /dev/null +++ b/packages/twenty-front/src/modules/navigation-menu-item/common/types/PendingInsertionNavigationMenuItem.ts @@ -0,0 +1,4 @@ +export type PendingInsertionNavigationMenuItem = { + folderId: string | null; + position: number; +}; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemDisplay.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemDisplay.tsx index 0f2d7f91a4..adf7597d85 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemDisplay.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemDisplay.tsx @@ -14,7 +14,6 @@ export const NavigationMenuItemDisplay = ({ folderChildrenById, folderCount, rightOptions, - selectedNavigationMenuItemId, onNavigationMenuItemClick, onActiveObjectMetadataItemClick, readOnly, @@ -30,7 +29,6 @@ export const NavigationMenuItemDisplay = ({ isDragging={isDragging} folderChildrenById={folderChildrenById} folderCount={folderCount} - selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} readOnly={readOnly} orphanIndex={orphanIndex} @@ -46,7 +44,6 @@ export const NavigationMenuItemDisplay = ({ folderChildrenById={folderChildrenById} folderCount={folderCount} rightOptions={rightOptions} - selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick} readOnly={readOnly} @@ -62,7 +59,6 @@ export const NavigationMenuItemDisplay = ({ folderChildrenById={folderChildrenById} folderCount={folderCount} rightOptions={rightOptions} - selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick} readOnly={readOnly} diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx index 2188c3cbde..98ca33127a 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx @@ -27,7 +27,6 @@ type NavigationMenuItemFolderProps = Pick< | 'isDragging' | 'folderChildrenById' | 'folderCount' - | 'selectedNavigationMenuItemId' | 'onNavigationMenuItemClick' | 'readOnly' | 'orphanIndex' @@ -40,7 +39,6 @@ export const NavigationMenuItemFolder = ({ isDragging, folderChildrenById, folderCount, - selectedNavigationMenuItemId, onNavigationMenuItemClick, readOnly = false, orphanIndex, @@ -88,7 +86,6 @@ export const NavigationMenuItemFolder = ({ isEditInPlace={isEditInPlace} editModeProps={editModeProps} isDragging={isDragging} - selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} orphanIndex={orphanIndex} /> diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderDnd.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderDnd.tsx index 176ec576af..1de6e89e6e 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderDnd.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderDnd.tsx @@ -2,7 +2,6 @@ import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import React, { Fragment, useCallback, useContext } from 'react'; import { createPortal } from 'react-dom'; -import { SidePanelPages } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; import { IconChevronDown, @@ -17,6 +16,7 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useIsMobile } from 'twenty-ui/utilities'; import { type NavigationMenuItem } from '~/generated-metadata/graphql'; +import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState'; import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/common/constants/FolderIconDefault'; import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/common/constants/NavigationMenuItemDefaultColorFolder'; import { NAVIGATION_MENU_ITEM_SECTION_DROPPABLE_CONFIG } from '@/navigation-menu-item/common/constants/NavigationMenuItemSectionDroppableConfig'; @@ -25,8 +25,6 @@ import { NavigationDropTargetContext } from '@/navigation-menu-item/common/conte import { NavigationMenuItemDragContext } from '@/navigation-menu-item/common/contexts/NavigationMenuItemDragContext'; import { SortableDropTargetRefContext } from '@/navigation-menu-item/common/contexts/SortableDropTargetRefContext'; import { useDeleteManyNavigationMenuItems } from '@/navigation-menu-item/common/hooks/useDeleteManyNavigationMenuItems'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; -import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState'; import type { NavigationMenuItemSection } from '@/navigation-menu-item/common/types/NavigationMenuItemSection'; import { getDndKitDropTargetId } from '@/navigation-menu-item/common/utils/getDndKitDropTargetId'; import { NavigationItemDropTarget } from '@/navigation-menu-item/display/dnd/components/NavigationItemDropTarget'; @@ -42,10 +40,11 @@ import { NavigationMenuItemFolderNavigationDrawerItemDropdown } from '@/navigati import { NavigationMenuItemFolderSubItem } from '@/navigation-menu-item/display/folder/components/NavigationMenuItemFolderSubItem'; import { useNavigationMenuItemFolderOpenState } from '@/navigation-menu-item/display/folder/hooks/useNavigationMenuItemFolderOpenState'; import type { NavigationMenuItemClickParams } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems'; -import { useOpenAddItemToFolderPage } from '@/navigation-menu-item/edit/hooks/useOpenAddItemToFolderPage'; +import { useIsNavigationMenuItemEditHighlighted } from '@/navigation-menu-item/display/hooks/useIsNavigationMenuItemEditHighlighted'; import { useFavoritesFolderEdit } from '@/navigation-menu-item/edit/folder/hooks/useFavoritesFolderEdit'; +import { useOpenAddItemToFolderPage } from '@/navigation-menu-item/edit/hooks/useOpenAddItemToFolderPage'; import type { EditModeProps } from '@/object-metadata/components/EditModeProps'; -import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState'; + import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerInput'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; @@ -87,7 +86,6 @@ type NavigationMenuItemFolderDndProps = { isEditInPlace: boolean; editModeProps?: EditModeProps; isDragging: boolean; - selectedNavigationMenuItemId?: string | null; onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void; orphanIndex?: number; }; @@ -102,7 +100,6 @@ export const NavigationMenuItemFolderDnd = ({ isEditInPlace, editModeProps, isDragging: isDraggingProp, - selectedNavigationMenuItemId, onNavigationMenuItemClick, orphanIndex, }: NavigationMenuItemFolderDndProps) => { @@ -144,10 +141,10 @@ export const NavigationMenuItemFolderDnd = ({ isLayoutCustomizationModeEnabledState, ); const { openAddItemToFolderPage } = useOpenAddItemToFolderPage(); - const sidePanelPage = useAtomStateValue(sidePanelPageState); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, - ); + const isFolderEditHighlighted = useIsNavigationMenuItemEditHighlighted({ + id: folderId, + folderId: null, + }); const config = NAVIGATION_MENU_ITEM_SECTION_DROPPABLE_CONFIG[section]; const folderHeaderDroppableId = `${config.folderHeaderPrefix}${folderId}`; @@ -284,8 +281,8 @@ export const NavigationMenuItemFolderDnd = ({ const handleAddMenuItemToFolder = useCallback(() => { openAddItemToFolderPage({ - targetFolderId: folderId, - targetIndex: navigationMenuItems.length, + folderId, + position: navigationMenuItems.length, resetNavigationStack: true, }); }, [folderId, navigationMenuItems.length, openAddItemToFolderPage]); @@ -315,7 +312,7 @@ export const NavigationMenuItemFolderDnd = ({ return ( <> @@ -372,9 +369,6 @@ export const NavigationMenuItemFolderDnd = ({ onNavigationMenuItemClick={ isWorkspace ? onNavigationMenuItemClick : undefined } - selectedNavigationMenuItemId={ - isWorkspace ? selectedNavigationMenuItemId : undefined - } /> @@ -401,10 +395,7 @@ export const NavigationMenuItemFolderDnd = ({ onClick={handleAddMenuItemToFolder} triggerEvent="CLICK" variant="tertiary" - isSelectedInEditMode={ - sidePanelPage === SidePanelPages.NavigationMenuAddItem && - addMenuItemInsertionContext?.targetFolderId === folderId - } + isSelectedInEditMode={false} subItemState={getNavigationSubItemLeftAdornment({ index: navigationMenuItems.length, arrayLength: folderContentLength, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderSubItem.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderSubItem.tsx index ffa9d9e4da..fae897326e 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderSubItem.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderSubItem.tsx @@ -10,6 +10,7 @@ import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/d import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/display/object/utils/getNavigationMenuItemObjectNameSingular'; import { getObjectNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/display/object/utils/getObjectNavigationMenuItemSecondaryLabel'; import { getNavigationMenuItemComputedLink } from '@/navigation-menu-item/display/utils/getNavigationMenuItemComputedLink'; +import { useIsNavigationMenuItemEditHighlighted } from '@/navigation-menu-item/display/hooks/useIsNavigationMenuItemEditHighlighted'; import { getNavigationMenuItemLabel } from '@/navigation-menu-item/display/utils/getNavigationMenuItemLabel'; import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector'; import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem'; @@ -30,7 +31,6 @@ type NavigationMenuItemFolderSubItemProps = { item: NavigationMenuItem; objectMetadataItem?: EnrichedObjectMetadataItem; }) => void; - selectedNavigationMenuItemId?: string | null; }; export const NavigationMenuItemFolderSubItem = ({ @@ -42,8 +42,9 @@ export const NavigationMenuItemFolderSubItem = ({ rightOptions, onClick, onNavigationMenuItemClick, - selectedNavigationMenuItemId, }: NavigationMenuItemFolderSubItemProps) => { + const isEditHighlightedInNavigationMenu = + useIsNavigationMenuItemEditHighlighted(navigationMenuItem); const objectMetadataItems = useAtomStateValue(objectMetadataItemsSelector); const views = useAtomStateValue(viewsSelector); @@ -112,9 +113,7 @@ export const NavigationMenuItemFolderSubItem = ({ to={isDragging || handleClick ? undefined : computedLink} onClick={handleClick} active={index === selectedNavigationMenuItemIndex} - isSelectedInEditMode={ - selectedNavigationMenuItemId === navigationMenuItem.id - } + isSelectedInEditMode={isEditHighlightedInNavigationMenu} subItemState={getNavigationSubItemLeftAdornment({ index, arrayLength, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/hooks/useIsNavigationMenuItemEditHighlighted.ts b/packages/twenty-front/src/modules/navigation-menu-item/display/hooks/useIsNavigationMenuItemEditHighlighted.ts new file mode 100644 index 0000000000..a992b4a48f --- /dev/null +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/hooks/useIsNavigationMenuItemEditHighlighted.ts @@ -0,0 +1,29 @@ +import { SidePanelPages } from 'twenty-shared/types'; +import { isDefined } from 'twenty-shared/utils'; + +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; +import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState'; +import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; +import { type NavigationMenuItem } from '~/generated-metadata/graphql'; + +export const useIsNavigationMenuItemEditHighlighted = ( + navigationMenuItem: Pick, +): boolean => { + const selectedNavigationMenuItemIdInEditMode = useAtomStateValue( + selectedNavigationMenuItemIdInEditModeState, + ); + const pendingInsertionNavigationMenuItem = useAtomStateValue( + pendingInsertionNavigationMenuItemState, + ); + const sidePanelPage = useAtomStateValue(sidePanelPageState); + + const isSelectedById = + selectedNavigationMenuItemIdInEditMode === navigationMenuItem.id; + const isPendingInsertionMatch = + isDefined(pendingInsertionNavigationMenuItem) && + pendingInsertionNavigationMenuItem.folderId === navigationMenuItem.id && + (sidePanelPage === SidePanelPages.NavigationMenuAddItem || + sidePanelPage === SidePanelPages.NavigationMenuItemEdit); + return isSelectedById || isPendingInsertionMatch; +}; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionContentProps.ts b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionContentProps.ts index 5b43f34f0e..9415a8c26d 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionContentProps.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionContentProps.ts @@ -14,7 +14,6 @@ export type NavigationMenuItemSectionContentProps = { folderChildrenById: Map; folderCount: number; rightOptions?: ReactNode; - selectedNavigationMenuItemId?: string | null; onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void; onActiveObjectMetadataItemClick?: ( objectMetadataItem: EnrichedObjectMetadataItem, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionListDndKitProps.ts b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionListDndKitProps.ts index a5806a6f2f..3a8beb9ea7 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionListDndKitProps.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionListDndKitProps.ts @@ -8,7 +8,6 @@ export type NavigationMenuItemSectionListDndKitProps = { filteredItems: NavigationMenuItem[]; getEditModeProps: (item: NavigationMenuItem) => EditModeProps; folderChildrenById: Map; - selectedNavigationMenuItemId: string | null; onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void; onActiveObjectMetadataItemClick?: ( objectMetadataItem: EnrichedObjectMetadataItem, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSection.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSection.tsx index a4bc3eaf36..00bb698a56 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSection.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSection.tsx @@ -16,7 +16,7 @@ import { useEnterLayoutCustomizationMode } from '@/layout-customization/hooks/us import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState'; import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/common/constants/FolderIconDefault'; import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/common/states/openNavigationMenuItemFolderIdsState'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { preloadNavigationMenuItemDndKit } from '@/navigation-menu-item/display/dnd/preloadNavigationMenuItemDndKit'; import { type NavigationMenuItemClickParams, @@ -52,9 +52,9 @@ export const WorkspaceSection = () => { isLayoutCustomizationModeEnabledState, ); const [ - selectedNavigationMenuItemInEditMode, - setSelectedNavigationMenuItemInEditMode, - ] = useAtomState(selectedNavigationMenuItemInEditModeState); + selectedNavigationMenuItemIdInEditMode, + setSelectedNavigationMenuItemIdInEditMode, + ] = useAtomState(selectedNavigationMenuItemIdInEditModeState); const setOpenNavigationMenuItemFolderIds = useSetAtomState( openNavigationMenuItemFolderIdsState, ); @@ -133,7 +133,7 @@ export const WorkspaceSection = () => { params: NavigationMenuItemClickParams, ) => { const { item, objectMetadataItem } = params; - setSelectedNavigationMenuItemInEditMode(item.id); + setSelectedNavigationMenuItemIdInEditMode(item.id); switch (item.type) { case NavigationMenuItemType.FOLDER: @@ -155,7 +155,7 @@ export const WorkspaceSection = () => { navigationMenuItemId: string, ) => { enterLayoutCustomizationMode(); - setSelectedNavigationMenuItemInEditMode(navigationMenuItemId); + setSelectedNavigationMenuItemIdInEditMode(navigationMenuItemId); openNavigationMenuItemInSidePanel({ pageTitle: objectMetadataItem.labelSingular, pageIcon: getIcon(objectMetadataItem.icon), @@ -197,7 +197,7 @@ export const WorkspaceSection = () => { )} } - selectedNavigationMenuItemId={selectedNavigationMenuItemInEditMode} + selectedNavigationMenuItemId={selectedNavigationMenuItemIdInEditMode} onNavigationMenuItemClick={ isLayoutCustomizationModeEnabled ? handleNavigationMenuItemClick diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionContainer.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionContainer.tsx index ea28208ef9..9a68bbd994 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionContainer.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionContainer.tsx @@ -169,7 +169,6 @@ export const WorkspaceSectionContainer = ({ filteredItems={filteredItems} getEditModeProps={getEditModeProps} folderChildrenById={folderChildrenById} - selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick} /> diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListDndKit.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListDndKit.tsx index 2e4a4b0d0c..012a147f82 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListDndKit.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListDndKit.tsx @@ -35,7 +35,6 @@ export const WorkspaceSectionListDndKit = ({ filteredItems, getEditModeProps, folderChildrenById, - selectedNavigationMenuItemId, onNavigationMenuItemClick, onActiveObjectMetadataItemClick, }: WorkspaceSectionListDndKitProps) => { @@ -72,7 +71,6 @@ export const WorkspaceSectionListDndKit = ({ isDragging={isDragging} folderChildrenById={folderChildrenById} folderCount={folderCount} - selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick} orphanIndex={index} diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListReadOnly.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListReadOnly.tsx index 55dff36520..14a4f4af7e 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListReadOnly.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListReadOnly.tsx @@ -42,7 +42,6 @@ export const WorkspaceSectionListReadOnly = ({ isDragging={false} folderChildrenById={folderChildrenById} folderCount={folderCount} - selectedNavigationMenuItemId={null} onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick} readOnly /> diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/components/WorkspaceSectionAddMenuItemButton.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/components/WorkspaceSectionAddMenuItemButton.tsx index cd052ff578..8fba0bea76 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/components/WorkspaceSectionAddMenuItemButton.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/components/WorkspaceSectionAddMenuItemButton.tsx @@ -3,11 +3,12 @@ import React from 'react'; import { SidePanelPages } from 'twenty-shared/types'; import { IconColumnInsertRight, IconPlus } from 'twenty-ui/display'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel'; import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; +import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; @@ -15,21 +16,19 @@ export const WorkspaceSectionAddMenuItemButton = () => { const { t } = useLingui(); const { navigateSidePanel } = useNavigateSidePanel(); const sidePanelPage = useAtomStateValue(sidePanelPageState); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, - ); - const setAddMenuItemInsertionContext = useSetAtomState( - addMenuItemInsertionContextState, - ); + const [ + pendingInsertionNavigationMenuItem, + setPendingInsertionNavigationMenuItem, + ] = useAtomState(pendingInsertionNavigationMenuItemState); - const setSelectedNavigationMenuItemInEditMode = useSetAtomState( - selectedNavigationMenuItemInEditModeState, + const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState( + selectedNavigationMenuItemIdInEditModeState, ); const handleClick = (event?: React.MouseEvent) => { event?.stopPropagation(); - setAddMenuItemInsertionContext(null); - setSelectedNavigationMenuItemInEditMode(null); + setPendingInsertionNavigationMenuItem(null); + setSelectedNavigationMenuItemIdInEditMode(null); navigateSidePanel({ page: SidePanelPages.NavigationMenuAddItem, pageTitle: t`New menu item`, @@ -40,7 +39,7 @@ export const WorkspaceSectionAddMenuItemButton = () => { const isSelected = sidePanelPage === SidePanelPages.NavigationMenuAddItem && - addMenuItemInsertionContext === null; + pendingInsertionNavigationMenuItem === null; return ( { const { t } = useLingui(); const { navigateSidePanel } = useNavigateSidePanel(); - const setAddMenuItemInsertionContext = useSetAtomState( - addMenuItemInsertionContextState, + const setPendingInsertionNavigationMenuItem = useSetAtomState( + pendingInsertionNavigationMenuItemState, ); - const setSelectedNavigationMenuItemInEditMode = useSetAtomState( - selectedNavigationMenuItemInEditModeState, + const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState( + selectedNavigationMenuItemIdInEditModeState, ); const openAddItemToFolderPage = ({ - targetFolderId, - targetIndex, + folderId, + position, resetNavigationStack = true, }: OpenAddItemToFolderPageParams) => { - setSelectedNavigationMenuItemInEditMode(null); - setAddMenuItemInsertionContext({ - targetFolderId, - targetIndex, - }); + setPendingInsertionNavigationMenuItem({ folderId, position }); + setSelectedNavigationMenuItemIdInEditMode(null); navigateSidePanel({ page: SidePanelPages.NavigationMenuAddItem, pageTitle: t`New menu item`, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel.ts b/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel.ts index 63fd6e0757..509d5ec4a4 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel.ts @@ -1,4 +1,5 @@ -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { SidePanelPages } from 'twenty-shared/types'; @@ -7,8 +8,11 @@ import type { IconComponent } from 'twenty-ui/display'; export const useOpenNavigationMenuItemInSidePanel = () => { const { navigateSidePanel } = useNavigateSidePanel(); - const setSelectedNavigationMenuItemInEditMode = useSetAtomState( - selectedNavigationMenuItemInEditModeState, + const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState( + selectedNavigationMenuItemIdInEditModeState, + ); + const setPendingInsertionNavigationMenuItem = useSetAtomState( + pendingInsertionNavigationMenuItemState, ); const openNavigationMenuItemInSidePanel = ({ @@ -23,8 +27,9 @@ export const useOpenNavigationMenuItemInSidePanel = () => { focusTitleInput?: boolean; }) => { if (isDefined(itemId)) { - setSelectedNavigationMenuItemInEditMode(itemId); + setSelectedNavigationMenuItemIdInEditMode(itemId); } + setPendingInsertionNavigationMenuItem(null); navigateSidePanel({ page: SidePanelPages.NavigationMenuItemEdit, pageTitle, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem.ts b/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem.ts index 08dc2ad40d..5e22e1410f 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem.ts @@ -1,15 +1,15 @@ import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; export const useSelectedNavigationMenuItemEditItem = () => { - const selectedNavigationMenuItemInEditMode = useAtomStateValue( - selectedNavigationMenuItemInEditModeState, + const selectedNavigationMenuItemIdInEditMode = useAtomStateValue( + selectedNavigationMenuItemIdInEditModeState, ); const items = useNavigationMenuItemSectionItems(); - const selectedItem = selectedNavigationMenuItemInEditMode - ? items.find((item) => item.id === selectedNavigationMenuItemInEditMode) + const selectedItem = selectedNavigationMenuItemIdInEditMode + ? items.find((item) => item.id === selectedNavigationMenuItemIdInEditMode) : undefined; return { selectedItem }; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNavigationMenuItemEditPage.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNavigationMenuItemEditPage.tsx index e25130574f..36696974cd 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNavigationMenuItemEditPage.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNavigationMenuItemEditPage.tsx @@ -1,11 +1,12 @@ import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem'; import { NavigationMenuItemType } from 'twenty-shared/types'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState'; -import { useOpenAddItemToFolderPage } from '@/navigation-menu-item/edit/hooks/useOpenAddItemToFolderPage'; import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem'; + import { useSelectedNavigationMenuItemEditItemLabel } from '@/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItemLabel'; import { useUpdateLinkInDraft } from '@/navigation-menu-item/edit/link/hooks/useUpdateLinkInDraft'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { parseThemeColor } from '@/navigation-menu-item/common/utils/parseThemeColor'; import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; import { SidePanelList } from '@/side-panel/components/SidePanelList'; @@ -20,6 +21,7 @@ import { getOrganizeActionsSelectableItemIds } from '@/navigation-menu-item/edit import { SidePanelSubPages } from '@/side-panel/types/SidePanelSubPages'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; +import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { isDefined } from 'twenty-shared/utils'; @@ -40,8 +42,8 @@ const StyledSidePanelPageContainer = styled.div` export const SidePanelNavigationMenuItemEditPage = () => { const { t } = useLingui(); - const selectedNavigationMenuItemInEditMode = useAtomStateValue( - selectedNavigationMenuItemInEditModeState, + const selectedNavigationMenuItemIdInEditMode = useAtomStateValue( + selectedNavigationMenuItemIdInEditModeState, ); const { selectedItemLabel } = useSelectedNavigationMenuItemEditItemLabel(); const { selectedItem } = useSelectedNavigationMenuItemEditItem(); @@ -62,8 +64,10 @@ export const SidePanelNavigationMenuItemEditPage = () => { } = useNavigationMenuItemEditOrganizeActions(); const { updateLinkInDraft } = useUpdateLinkInDraft(); - const { openAddItemToFolderPage } = useOpenAddItemToFolderPage(); const { workspaceNavigationMenuItems } = useNavigationMenuItemsDraftState(); + const setPendingInsertionNavigationMenuItem = useSetAtomState( + pendingInsertionNavigationMenuItemState, + ); const handleAddItemToFolder = () => { if (!selectedItem || selectedItem.type !== NavigationMenuItemType.FOLDER) { @@ -72,14 +76,14 @@ export const SidePanelNavigationMenuItemEditPage = () => { const folderItemCount = workspaceNavigationMenuItems.filter( (item) => (item.folderId ?? null) === selectedItem.id, ).length; - openAddItemToFolderPage({ - targetFolderId: selectedItem.id, - targetIndex: folderItemCount, - resetNavigationStack: false, + setPendingInsertionNavigationMenuItem({ + folderId: selectedItem.id, + position: folderItemCount, }); + navigateToSidePanelSubPage(SidePanelSubPages.NewSidebarItemMainMenu); }; - if (!selectedNavigationMenuItemInEditMode || !selectedItemLabel) { + if (!selectedNavigationMenuItemIdInEditMode || !selectedItemLabel) { return ( diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemMainMenu.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemMainMenu.tsx index 1526abb82d..6d9c24ab80 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemMainMenu.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemMainMenu.tsx @@ -12,7 +12,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem'; import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/display/components/NavigationMenuItemStyleIcon'; import { NavigationMenuItemType } from 'twenty-shared/types'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; import { SidePanelAddToNavigationDroppable } from '@/side-panel/components/SidePanelAddToNavigationDroppable'; import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; import { SidePanelItemWithAddToNavigationDrag } from '@/side-panel/components/SidePanelItemWithAddToNavigationDrag'; @@ -42,16 +42,15 @@ export const SidePanelNewSidebarItemMainMenu = ({ onSelectRecord, }: SidePanelNewSidebarItemMainMenuProps) => { const { t } = useLingui(); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, + const pendingInsertionNavigationMenuItem = useAtomStateValue( + pendingInsertionNavigationMenuItemState, ); const { handleAddFolder } = useAddFolderToNavigationMenu(); const { handleAddLink } = useAddLinkToNavigationMenu(); const isAddingToFolder = isDefined( - addMenuItemInsertionContext?.targetFolderId, + pendingInsertionNavigationMenuItem?.folderId, ); - const isDragDisabled = addMenuItemInsertionContext?.disableDrag === true; const selectableItemIds = isAddingToFolder ? MAIN_MENU_ITEM_TYPES.filter( (type) => type !== NavigationMenuItemType.FOLDER, @@ -128,14 +127,13 @@ export const SidePanelNewSidebarItemMainMenu = ({ label={t`Folder`} id={NavigationMenuItemType.FOLDER} onClick={handleAddFolder} - dragIndex={isDragDisabled ? undefined : 3} + dragIndex={3} payload={{ type: NavigationMenuItemType.FOLDER, folderId: 'new', name: t`New folder`, }} disabled={isAddingToFolder} - disableDrag={isDragDisabled} /> diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSubPage.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSubPage.tsx index c63bff3998..1265f66b03 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSubPage.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSubPage.tsx @@ -4,7 +4,7 @@ import { useAddObjectToNavigationMenuDraft } from '@/navigation-menu-item/edit/o import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems'; import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/edit/hooks/useNavigationMenuObjectMetadataFromDraft'; import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; import { getStandardObjectIconColor } from '@/navigation-menu-item/common/utils/getStandardObjectIconColor'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; @@ -13,8 +13,7 @@ import { useSidePanelSubPageHistory } from '@/side-panel/hooks/useSidePanelSubPa import { SidePanelObjectPickerSubView } from '@/navigation-menu-item/edit/side-panel/components/SidePanelObjectPickerSubView'; import { getAvailableObjectMetadataForNewSidebarItem } from '@/navigation-menu-item/edit/side-panel/utils/getAvailableObjectMetadataForNewSidebarItem'; import { SidePanelSubPages } from '@/side-panel/types/SidePanelSubPages'; -import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; +import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { ViewKey } from '@/views/types/ViewKey'; import { useIcons } from 'twenty-ui/display'; @@ -30,12 +29,10 @@ export const SidePanelNewSidebarItemObjectSubPage = () => { useOpenNavigationMenuItemInSidePanel(); const { activeNonSystemObjectMetadataItems } = useFilteredObjectMetadataItems(); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, - ); - const setAddMenuItemInsertionContext = useSetAtomState( - addMenuItemInsertionContextState, - ); + const [ + pendingInsertionNavigationMenuItem, + setPendingInsertionNavigationMenuItem, + ] = useAtomState(pendingInsertionNavigationMenuItemState); const { views, objectMetadataIdsWithIndexView, @@ -65,11 +62,11 @@ export const SidePanelNewSidebarItemObjectSubPage = () => { const itemId = addObjectToDraft( objectMetadataItem.id, currentDraft, - addMenuItemInsertionContext?.targetFolderId, - addMenuItemInsertionContext?.targetIndex, + pendingInsertionNavigationMenuItem?.folderId, + pendingInsertionNavigationMenuItem?.position, getStandardObjectIconColor(objectMetadataItem.nameSingular), ); - setAddMenuItemInsertionContext(null); + setPendingInsertionNavigationMenuItem(null); openNavigationMenuItemInSidePanel({ itemId, pageTitle: objectMetadataItem.labelSingular, @@ -77,8 +74,6 @@ export const SidePanelNewSidebarItemObjectSubPage = () => { }); }; - const disableDrag = addMenuItemInsertionContext?.disableDrag === true; - return ( { isViewItem={false} onChangeObject={handleSelectObject} objectMenuItemVariant="add" - disableDrag={disableDrag} /> ); }; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSystemPickerSubPage.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSystemPickerSubPage.tsx index 0994917edd..5183fea87a 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSystemPickerSubPage.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSystemPickerSubPage.tsx @@ -4,15 +4,14 @@ import { useAddObjectToNavigationMenuDraft } from '@/navigation-menu-item/edit/o import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems'; import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/edit/hooks/useNavigationMenuObjectMetadataFromDraft'; import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; import { getStandardObjectIconColor } from '@/navigation-menu-item/common/utils/getStandardObjectIconColor'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem'; import { SidePanelSystemObjectPickerSubView } from '@/navigation-menu-item/edit/side-panel/components/SidePanelSystemObjectPickerSubView'; import { getAvailableObjectMetadataForNewSidebarItem } from '@/navigation-menu-item/edit/side-panel/utils/getAvailableObjectMetadataForNewSidebarItem'; -import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; +import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { ViewKey } from '@/views/types/ViewKey'; import { useState } from 'react'; import { useIcons } from 'twenty-ui/display'; @@ -29,12 +28,10 @@ export const SidePanelNewSidebarItemObjectSystemPickerSubPage = () => { useOpenNavigationMenuItemInSidePanel(); const { activeNonSystemObjectMetadataItems } = useFilteredObjectMetadataItems(); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, - ); - const setAddMenuItemInsertionContext = useSetAtomState( - addMenuItemInsertionContextState, - ); + const [ + pendingInsertionNavigationMenuItem, + setPendingInsertionNavigationMenuItem, + ] = useAtomState(pendingInsertionNavigationMenuItemState); const { views, objectMetadataIdsWithIndexView, @@ -64,11 +61,11 @@ export const SidePanelNewSidebarItemObjectSystemPickerSubPage = () => { const itemId = addObjectToDraft( objectMetadataItem.id, currentDraft, - addMenuItemInsertionContext?.targetFolderId, - addMenuItemInsertionContext?.targetIndex, + pendingInsertionNavigationMenuItem?.folderId, + pendingInsertionNavigationMenuItem?.position, getStandardObjectIconColor(objectMetadataItem.nameSingular), ); - setAddMenuItemInsertionContext(null); + setPendingInsertionNavigationMenuItem(null); openNavigationMenuItemInSidePanel({ itemId, pageTitle: objectMetadataItem.labelSingular, @@ -76,8 +73,6 @@ export const SidePanelNewSidebarItemObjectSystemPickerSubPage = () => { }); }; - const disableDrag = addMenuItemInsertionContext?.disableDrag === true; - return ( { onChangeObject={handleSelectObject} objectMenuItemVariant="add" emptyNoResultsText={t`All system objects are already in the sidebar`} - disableDrag={disableDrag} /> ); }; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordItem.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordItem.tsx index 04bb91bd7c..e639852ca7 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordItem.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordItem.tsx @@ -3,13 +3,12 @@ import { Avatar, IconFolder, useIcons } from 'twenty-ui/display'; import { useAddRecordToNavigationMenuDraft } from '@/navigation-menu-item/edit/record/hooks/useAddRecordToNavigationMenuDraft'; import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems'; import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; import type { AddToNavigationDragPayload } from '@/navigation-menu-item/common/types/add-to-navigation-drag-payload'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { SidePanelItemWithAddToNavigationDrag } from '@/side-panel/components/SidePanelItemWithAddToNavigationDrag'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; -import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; +import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { CoreObjectNameSingular, NavigationMenuItemType, @@ -25,23 +24,19 @@ type SearchRecord = { type SidePanelNewSidebarItemRecordItemProps = { record: SearchRecord; dragIndex?: number; - disableDrag?: boolean; }; export const SidePanelNewSidebarItemRecordItem = ({ record, dragIndex, - disableDrag = false, }: SidePanelNewSidebarItemRecordItemProps) => { const { getIcon } = useIcons(); const { addRecordToDraft } = useAddRecordToNavigationMenuDraft(); const { currentDraft } = useDraftNavigationMenuItems(); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, - ); - const setAddMenuItemInsertionContext = useSetAtomState( - addMenuItemInsertionContextState, - ); + const [ + pendingInsertionNavigationMenuItem, + setPendingInsertionNavigationMenuItem, + ] = useAtomState(pendingInsertionNavigationMenuItemState); const { openNavigationMenuItemInSidePanel } = useOpenNavigationMenuItemInSidePanel(); const { objectMetadataItems } = useObjectMetadataItems(); @@ -66,10 +61,10 @@ export const SidePanelNewSidebarItemRecordItem = ({ imageUrl: record.imageUrl, }, currentDraft, - addMenuItemInsertionContext?.targetFolderId ?? null, - addMenuItemInsertionContext?.targetIndex, + pendingInsertionNavigationMenuItem?.folderId ?? null, + pendingInsertionNavigationMenuItem?.position, ); - setAddMenuItemInsertionContext(null); + setPendingInsertionNavigationMenuItem(null); openNavigationMenuItemInSidePanel({ itemId, pageTitle: record.label, @@ -101,7 +96,6 @@ export const SidePanelNewSidebarItemRecordItem = ({ id={record.recordId} onClick={handleSelectRecord} dragIndex={dragIndex} - disableDrag={disableDrag} payload={recordPayload} /> diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordSubPage.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordSubPage.tsx index dafa740af8..937fae6749 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordSubPage.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordSubPage.tsx @@ -5,7 +5,6 @@ import { useDebounce } from 'use-debounce'; import { MAX_SEARCH_RESULTS } from '@/command-menu/constants/MaxSearchResults'; import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions'; @@ -15,7 +14,6 @@ import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; import { SidePanelList } from '@/side-panel/components/SidePanelList'; import { SidePanelSubViewWithSearch } from '@/side-panel/components/SidePanelSubViewWithSearch'; import { SidePanelNewSidebarItemRecordItem } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordItem'; -import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useQuery } from '@apollo/client/react'; import { SearchDocument } from '~/generated/graphql'; @@ -28,10 +26,6 @@ type SearchRecordBase = { export const SidePanelNewSidebarItemRecordSubPage = () => { const { t } = useLingui(); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, - ); - const disableDrag = addMenuItemInsertionContext?.disableDrag === true; const { currentDraft } = useDraftNavigationMenuItems(); const { objectMetadataItems } = useObjectMetadataItems(); const [recordSearchInput, setRecordSearchInput] = useState(''); @@ -107,8 +101,7 @@ export const SidePanelNewSidebarItemRecordSubPage = () => { ))} diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemViewPickerSubView.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemViewPickerSubView.tsx index 10ba48bc4f..3ede954a52 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemViewPickerSubView.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemViewPickerSubView.tsx @@ -4,7 +4,7 @@ import { useAddViewToNavigationMenuDraft } from '@/navigation-menu-item/edit/vie import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems'; import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/edit/hooks/useNavigationMenuObjectMetadataFromDraft'; import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; import { getStandardObjectIconColor } from '@/navigation-menu-item/common/utils/getStandardObjectIconColor'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { SidePanelAddToNavigationDroppable } from '@/side-panel/components/SidePanelAddToNavigationDroppable'; @@ -14,8 +14,7 @@ import { SidePanelList } from '@/side-panel/components/SidePanelList'; import { SidePanelSubViewWithSearch } from '@/side-panel/components/SidePanelSubViewWithSearch'; import { useSidePanelFilteredPickerItems } from '@/side-panel/hooks/useSidePanelFilteredPickerItems'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; -import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; +import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { type View } from '@/views/types/View'; import { ViewKey } from '@/views/types/ViewKey'; import { ViewType } from '@/views/types/ViewType'; @@ -37,12 +36,10 @@ export const SidePanelNewSidebarItemViewPickerSubView = ({ const [searchValue, setSearchValue] = useState(''); const { addViewToDraft } = useAddViewToNavigationMenuDraft(); const { currentDraft } = useDraftNavigationMenuItems(); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, - ); - const setAddMenuItemInsertionContext = useSetAtomState( - addMenuItemInsertionContextState, - ); + const [ + pendingInsertionNavigationMenuItem, + setPendingInsertionNavigationMenuItem, + ] = useAtomState(pendingInsertionNavigationMenuItemState); const { openNavigationMenuItemInSidePanel } = useOpenNavigationMenuItemInSidePanel(); const { objectMetadataItems } = useObjectMetadataItems(); @@ -76,19 +73,17 @@ export const SidePanelNewSidebarItemViewPickerSubView = ({ ? t`No results found` : t`No custom views available`; - const isDragDisabled = addMenuItemInsertionContext?.disableDrag === true; - const handleSelectView = (view: View) => { const itemId = addViewToDraft( view.id, currentDraft, - addMenuItemInsertionContext?.targetFolderId ?? null, - addMenuItemInsertionContext?.targetIndex, + pendingInsertionNavigationMenuItem?.folderId ?? null, + pendingInsertionNavigationMenuItem?.position, isDefined(selectedObjectMetadataItem) ? getStandardObjectIconColor(selectedObjectMetadataItem.nameSingular) : undefined, ); - setAddMenuItemInsertionContext(null); + setPendingInsertionNavigationMenuItem(null); openNavigationMenuItemInSidePanel({ itemId, pageTitle: view.name, @@ -141,8 +136,7 @@ export const SidePanelNewSidebarItemViewPickerSubView = ({ label={view.name} id={view.id} onClick={() => handleSelectView(view)} - dragIndex={isDragDisabled ? undefined : index} - disableDrag={isDragDisabled} + dragIndex={index} payload={{ type: NavigationMenuItemType.VIEW, viewId: view.id, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddFolderToNavigationMenu.ts b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddFolderToNavigationMenu.ts index 977f3c8c44..d75477a90d 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddFolderToNavigationMenu.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddFolderToNavigationMenu.ts @@ -5,10 +5,10 @@ import { IconFolder } from 'twenty-ui/display'; import { useAddFolderToNavigationMenuDraft } from '@/navigation-menu-item/edit/folder/hooks/useAddFolderToNavigationMenuDraft'; import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState'; import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState'; +import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; export const useAddFolderToNavigationMenu = () => { const { t } = useLingui(); @@ -19,29 +19,24 @@ export const useAddFolderToNavigationMenu = () => { ); const { openNavigationMenuItemInSidePanel } = useOpenNavigationMenuItemInSidePanel(); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, - ); - const setAddMenuItemInsertionContext = useSetAtomState( - addMenuItemInsertionContextState, - ); + const [ + pendingInsertionNavigationMenuItem, + setPendingInsertionNavigationMenuItem, + ] = useAtomState(pendingInsertionNavigationMenuItemState); const currentDraft = isDefined(navigationMenuItemsDraft) ? navigationMenuItemsDraft : workspaceNavigationMenuItems; const handleAddFolder = () => { - const targetFolderId = addMenuItemInsertionContext?.targetFolderId ?? null; - const targetIndex = addMenuItemInsertionContext?.targetIndex; - const itemId = addFolderToDraft( t`New folder`, currentDraft, - targetFolderId, - targetIndex, + pendingInsertionNavigationMenuItem?.folderId ?? null, + pendingInsertionNavigationMenuItem?.position, ); - setAddMenuItemInsertionContext(null); + setPendingInsertionNavigationMenuItem(null); openNavigationMenuItemInSidePanel({ itemId, pageTitle: t`Edit folder`, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddLinkToNavigationMenu.ts b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddLinkToNavigationMenu.ts index e21615e176..9fafd697dc 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddLinkToNavigationMenu.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddLinkToNavigationMenu.ts @@ -5,10 +5,10 @@ import { IconLink } from 'twenty-ui/display'; import { useAddLinkToNavigationMenuDraft } from '@/navigation-menu-item/edit/link/hooks/useAddLinkToNavigationMenuDraft'; import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState'; import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState'; +import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; export const useAddLinkToNavigationMenu = () => { const { t } = useLingui(); @@ -19,30 +19,25 @@ export const useAddLinkToNavigationMenu = () => { ); const { openNavigationMenuItemInSidePanel } = useOpenNavigationMenuItemInSidePanel(); - const addMenuItemInsertionContext = useAtomStateValue( - addMenuItemInsertionContextState, - ); - const setAddMenuItemInsertionContext = useSetAtomState( - addMenuItemInsertionContextState, - ); + const [ + pendingInsertionNavigationMenuItem, + setPendingInsertionNavigationMenuItem, + ] = useAtomState(pendingInsertionNavigationMenuItemState); const currentDraft = isDefined(navigationMenuItemsDraft) ? navigationMenuItemsDraft : workspaceNavigationMenuItems; const handleAddLink = () => { - const targetFolderId = addMenuItemInsertionContext?.targetFolderId ?? null; - const targetIndex = addMenuItemInsertionContext?.targetIndex; - const itemId = addLinkToDraft( t`Link label`, 'www.example.com', currentDraft, - targetFolderId, - targetIndex, + pendingInsertionNavigationMenuItem?.folderId ?? null, + pendingInsertionNavigationMenuItem?.position, ); - setAddMenuItemInsertionContext(null); + setPendingInsertionNavigationMenuItem(null); openNavigationMenuItemInSidePanel({ itemId, pageTitle: t`Edit link`, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useFolderPickerSelectionData.ts b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useFolderPickerSelectionData.ts index bda847ed7d..200c2e6956 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useFolderPickerSelectionData.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useFolderPickerSelectionData.ts @@ -5,7 +5,7 @@ import { useDraftNavigationMenuItemsAllFolders } from '@/navigation-menu-item/ed import { useDraftNavigationMenuItemsWorkspaceFolders } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItemsWorkspaceFolders'; import { useNavigationMenuItemMoveRemove } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemMoveRemove'; import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; @@ -41,8 +41,8 @@ const excludeCurrentFolder = ( export const useFolderPickerSelectionData = () => { const { closeSidePanelMenu } = useSidePanelMenu(); const { moveToFolder } = useNavigationMenuItemMoveRemove(); - const selectedNavigationMenuItemInEditMode = useAtomStateValue( - selectedNavigationMenuItemInEditModeState, + const selectedNavigationMenuItemIdInEditMode = useAtomStateValue( + selectedNavigationMenuItemIdInEditModeState, ); const { selectedItem } = useSelectedNavigationMenuItemEditItem(); const selectedItemType = selectedItem?.type ?? null; @@ -51,7 +51,7 @@ export const useFolderPickerSelectionData = () => { const selectedFolderId = selectedItemType === NavigationMenuItemType.FOLDER - ? selectedNavigationMenuItemInEditMode + ? selectedNavigationMenuItemIdInEditMode : null; const currentFolderId = selectedItemType === NavigationMenuItemType.FOLDER @@ -86,8 +86,8 @@ export const useFolderPickerSelectionData = () => { : excludeCurrentFolder(workspaceFolders, currentFolderId); const handleSelectFolder = (folderId: string | null) => { - if (isDefined(selectedNavigationMenuItemInEditMode)) { - moveToFolder(selectedNavigationMenuItemInEditMode, folderId); + if (isDefined(selectedNavigationMenuItemIdInEditMode)) { + moveToFolder(selectedNavigationMenuItemIdInEditMode, folderId); closeSidePanelMenu(); } }; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts index b0730cdfd0..eaefda4e69 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts @@ -1,31 +1,30 @@ import { useLingui } from '@lingui/react/macro'; import { isDefined } from 'twenty-shared/utils'; -import { IconColumnInsertRight } from 'twenty-ui/display'; -import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; -import { type AddMenuItemInsertionContext } from '@/navigation-menu-item/common/types/AddMenuItemInsertionContext'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; +import { type PendingInsertionNavigationMenuItem } from '@/navigation-menu-item/common/types/PendingInsertionNavigationMenuItem'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems'; import { useNavigationMenuItemMoveRemove } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemMoveRemove'; import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState'; import { type OrganizeActionsProps } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions'; -import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel'; +import { useSidePanelSubPageHistory } from '@/side-panel/hooks/useSidePanelSubPageHistory'; import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu'; +import { SidePanelSubPages } from '@/side-panel/types/SidePanelSubPages'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; -import { SidePanelPages } from 'twenty-shared/types'; import { type NavigationMenuItem } from '~/generated-metadata/graphql'; -const getAddMenuItemInsertionContext = ( +const computeInsertionPosition = ( selectedItem: { id: string; folderId?: string | null }, workspaceNavigationMenuItems: NavigationMenuItem[], offset: 0 | 1, -): AddMenuItemInsertionContext | null => { - const targetFolderId = selectedItem.folderId ?? null; +): PendingInsertionNavigationMenuItem | null => { + const folderId = selectedItem.folderId ?? null; const itemsInFolderSorted = workspaceNavigationMenuItems .filter( (item) => - (item.folderId ?? null) === targetFolderId && + (item.folderId ?? null) === folderId && !isDefined(item.userWorkspaceId), ) .sort((a, b) => a.position - b.position); @@ -38,9 +37,8 @@ const getAddMenuItemInsertionContext = ( } return { - targetFolderId, - targetIndex: selectedIndexSorted + offset, - disableDrag: true, + folderId, + position: selectedIndexSorted + offset, }; }; @@ -48,22 +46,22 @@ export const useNavigationMenuItemEditOrganizeActions = (): OrganizeActionsProps => { const { t } = useLingui(); const { closeSidePanelMenu } = useSidePanelMenu(); - const { navigateSidePanel } = useNavigateSidePanel(); - const selectedNavigationMenuItemInEditMode = useAtomStateValue( - selectedNavigationMenuItemInEditModeState, + const { navigateToSidePanelSubPage } = useSidePanelSubPageHistory(); + const selectedNavigationMenuItemIdInEditMode = useAtomStateValue( + selectedNavigationMenuItemIdInEditModeState, ); - const setSelectedNavigationMenuItemInEditMode = useSetAtomState( - selectedNavigationMenuItemInEditModeState, + const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState( + selectedNavigationMenuItemIdInEditModeState, ); - const setAddMenuItemInsertionContext = useSetAtomState( - addMenuItemInsertionContextState, + const setPendingInsertionNavigationMenuItem = useSetAtomState( + pendingInsertionNavigationMenuItemState, ); const { workspaceNavigationMenuItems } = useNavigationMenuItemsDraftState(); const items = useNavigationMenuItemSectionItems(); const { moveUp, moveDown, remove } = useNavigationMenuItemMoveRemove(); - const selectedItem = selectedNavigationMenuItemInEditMode - ? items.find((item) => item.id === selectedNavigationMenuItemInEditMode) + const selectedItem = selectedNavigationMenuItemIdInEditMode + ? items.find((item) => item.id === selectedNavigationMenuItemIdInEditMode) : undefined; const folderId = selectedItem?.folderId ?? null; @@ -80,48 +78,50 @@ export const useNavigationMenuItemEditOrganizeActions = const canMoveUp = selectedIndexInSiblings > 0 && selectedItem != null && - isDefined(selectedNavigationMenuItemInEditMode); + isDefined(selectedNavigationMenuItemIdInEditMode); const canMoveDown = selectedIndexInSiblings >= 0 && selectedIndexInSiblings < siblings.length - 1 && selectedItem != null && - isDefined(selectedNavigationMenuItemInEditMode); + isDefined(selectedNavigationMenuItemIdInEditMode); const handleMoveUp = () => { - if (canMoveUp && isDefined(selectedNavigationMenuItemInEditMode)) { - moveUp(selectedNavigationMenuItemInEditMode); + if (canMoveUp && isDefined(selectedNavigationMenuItemIdInEditMode)) { + moveUp(selectedNavigationMenuItemIdInEditMode); } }; const handleMoveDown = () => { - if (canMoveDown && isDefined(selectedNavigationMenuItemInEditMode)) { - moveDown(selectedNavigationMenuItemInEditMode); + if (canMoveDown && isDefined(selectedNavigationMenuItemIdInEditMode)) { + moveDown(selectedNavigationMenuItemIdInEditMode); } }; const handleRemove = () => { - if (isDefined(selectedNavigationMenuItemInEditMode)) { - remove(selectedNavigationMenuItemInEditMode); - setSelectedNavigationMenuItemInEditMode(null); + if (isDefined(selectedNavigationMenuItemIdInEditMode)) { + remove(selectedNavigationMenuItemIdInEditMode); + setSelectedNavigationMenuItemIdInEditMode(null); closeSidePanelMenu(); } }; const handleAddAtOffset = (offset: 0 | 1) => { if (!isDefined(selectedItem)) return; - const context = getAddMenuItemInsertionContext( + const insertion = computeInsertionPosition( selectedItem, workspaceNavigationMenuItems, offset, ); - if (!context) return; - setAddMenuItemInsertionContext(context); - navigateSidePanel({ - page: SidePanelPages.NavigationMenuAddItem, - pageTitle: t`New menu item`, - pageIcon: IconColumnInsertRight, - resetNavigationStack: true, - }); + if (!insertion) return; + + const title = + offset === 0 ? t`Add menu item before` : t`Add menu item after`; + + setPendingInsertionNavigationMenuItem(insertion); + navigateToSidePanelSubPage( + SidePanelSubPages.NewSidebarItemMainMenu, + title, + ); }; const handleAddBefore = () => handleAddAtOffset(0); diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelFolderInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelFolderInfo.tsx index 8e4dfa4b61..869fe123ba 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelFolderInfo.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelFolderInfo.tsx @@ -10,7 +10,7 @@ import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/common/constants/Fol import { NavigationMenuItemType } from 'twenty-shared/types'; import { useUpdateFolderInDraft } from '@/navigation-menu-item/edit/folder/hooks/useUpdateFolderInDraft'; import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { IconPicker } from '@/ui/input/components/IconPicker'; import { TitleInput } from '@/ui/input/components/TitleInput'; import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState'; @@ -29,8 +29,8 @@ export const SidePanelFolderInfo = () => { sidePanelShouldFocusTitleInputComponentState, sidePanelPageInfo.instanceId, ); - const selectedNavigationMenuItemInEditMode = useAtomStateValue( - selectedNavigationMenuItemInEditModeState, + const selectedNavigationMenuItemIdInEditMode = useAtomStateValue( + selectedNavigationMenuItemIdInEditModeState, ); const items = useNavigationMenuItemSectionItems(); const { updateFolderInDraft } = useUpdateFolderInDraft(); @@ -38,11 +38,11 @@ export const SidePanelFolderInfo = () => { const defaultLabel = t`New folder`; const placeholder = t`Folder name`; - const selectedItem = selectedNavigationMenuItemInEditMode + const selectedItem = selectedNavigationMenuItemIdInEditMode ? items.find( (item) => item.type === NavigationMenuItemType.FOLDER && - item.id === selectedNavigationMenuItemInEditMode, + item.id === selectedNavigationMenuItemIdInEditMode, ) : undefined; diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelLinkInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelLinkInfo.tsx index 8a7642ca5e..5dea9813eb 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelLinkInfo.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelLinkInfo.tsx @@ -5,7 +5,7 @@ import { LinkIconWithLinkOverlay } from '@/navigation-menu-item/display/link/com import { NavigationMenuItemType } from 'twenty-shared/types'; import { useUpdateLinkInDraft } from '@/navigation-menu-item/edit/link/hooks/useUpdateLinkInDraft'; import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout'; import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState'; import { sidePanelShouldFocusTitleInputComponentState } from '@/side-panel/states/sidePanelShouldFocusTitleInputComponentState'; @@ -21,8 +21,8 @@ export const SidePanelLinkInfo = () => { sidePanelShouldFocusTitleInputComponentState, sidePanelPageInfo.instanceId, ); - const selectedNavigationMenuItemInEditMode = useAtomStateValue( - selectedNavigationMenuItemInEditModeState, + const selectedNavigationMenuItemIdInEditMode = useAtomStateValue( + selectedNavigationMenuItemIdInEditModeState, ); const items = useNavigationMenuItemSectionItems(); const { updateLinkInDraft } = useUpdateLinkInDraft(); @@ -30,11 +30,11 @@ export const SidePanelLinkInfo = () => { const defaultLabel = t`Link label`; const placeholder = t`Link label`; - const selectedItem = selectedNavigationMenuItemInEditMode + const selectedItem = selectedNavigationMenuItemIdInEditMode ? items.find( (item) => item.type === NavigationMenuItemType.LINK && - item.id === selectedNavigationMenuItemInEditMode, + item.id === selectedNavigationMenuItemIdInEditMode, ) : undefined; diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx index 19921961e3..02d707c18c 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx @@ -7,7 +7,7 @@ import { import { NavigationMenuItemType, SidePanelPages } from 'twenty-shared/types'; import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { SidePanelAskAIInfo } from '@/side-panel/components/SidePanelAskAIInfo'; import { SidePanelFolderInfo } from '@/side-panel/components/SidePanelFolderInfo'; import { SidePanelLinkInfo } from '@/side-panel/components/SidePanelLinkInfo'; @@ -34,8 +34,8 @@ type SidePanelPageInfoProps = { export const SidePanelPageInfo = ({ pageChip }: SidePanelPageInfoProps) => { const { theme } = useContext(ThemeContext); - const selectedNavigationMenuItemInEditMode = useAtomStateValue( - selectedNavigationMenuItemInEditModeState, + const selectedNavigationMenuItemIdInEditMode = useAtomStateValue( + selectedNavigationMenuItemIdInEditModeState, ); const items = useNavigationMenuItemSectionItems(); @@ -46,7 +46,7 @@ export const SidePanelPageInfo = ({ pageChip }: SidePanelPageInfoProps) => { const isNavigationMenuItemEditPage = pageChip.page?.page === SidePanelPages.NavigationMenuItemEdit; const selectedNavItem = isNavigationMenuItemEditPage - ? items.find((item) => item.id === selectedNavigationMenuItemInEditMode) + ? items.find((item) => item.id === selectedNavigationMenuItemIdInEditMode) : undefined; if (isNavigationMenuItemEditPage && isDefined(selectedNavItem)) { diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelNewSidebarItemFlowSubPages.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelNewSidebarItemFlowSubPages.ts new file mode 100644 index 0000000000..6c34dd19d3 --- /dev/null +++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelNewSidebarItemFlowSubPages.ts @@ -0,0 +1,11 @@ +import { SidePanelSubPages } from '@/side-panel/types/SidePanelSubPages'; + +export const NEW_SIDEBAR_ITEM_FLOW_SIDE_PANEL_SUB_PAGES: SidePanelSubPages[] = [ + SidePanelSubPages.NewSidebarItemMainMenu, + SidePanelSubPages.NewSidebarItemViewObjectPicker, + SidePanelSubPages.NewSidebarItemViewPicker, + SidePanelSubPages.NewSidebarItemViewSystemPicker, + SidePanelSubPages.NewSidebarItemObjectPicker, + SidePanelSubPages.NewSidebarItemObjectSystemPicker, + SidePanelSubPages.NewSidebarItemRecord, +]; diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelSubPagesConfig.tsx b/packages/twenty-front/src/modules/side-panel/constants/SidePanelSubPagesConfig.tsx index cfda24be15..7d16efc608 100644 --- a/packages/twenty-front/src/modules/side-panel/constants/SidePanelSubPagesConfig.tsx +++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelSubPagesConfig.tsx @@ -1,4 +1,5 @@ import { SidePanelEditFolderPickerSubPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditFolderPickerSubPage'; +import { SidePanelNewSidebarItemPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemPage'; import { SidePanelNewSidebarItemObjectSubPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSubPage'; import { SidePanelNewSidebarItemObjectSystemPickerSubPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSystemPickerSubPage'; import { SidePanelNewSidebarItemRecordSubPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordSubPage'; @@ -18,6 +19,7 @@ export const SIDE_PANEL_SUB_PAGES_CONFIG = new Map< >([ [SidePanelSubPages.PageLayoutGraphFilter, ], [SidePanelSubPages.PageLayoutFieldsLayout, ], + [SidePanelSubPages.NewSidebarItemMainMenu, ], [ SidePanelSubPages.PageLayoutRecordTableFilter, , diff --git a/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts index 19f69f9a7e..17be98a3e9 100644 --- a/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts +++ b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts @@ -1,6 +1,6 @@ import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState'; import { addToNavPayloadRegistryState } from '@/navigation-menu-item/common/states/addToNavPayloadRegistryState'; -import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId'; import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel'; import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState'; @@ -45,7 +45,7 @@ export const useSidePanelMenu = () => { isLayoutCustomizationModeEnabledState.atom, ); const selectedNavigationItemId = store.get( - selectedNavigationMenuItemInEditModeState.atom, + selectedNavigationMenuItemIdInEditModeState.atom, ); if ( isLayoutCustomizationModeEnabled && diff --git a/packages/twenty-front/src/modules/side-panel/states/sidePanelSubPageStackForActiveSidePanelPageSelector.ts b/packages/twenty-front/src/modules/side-panel/states/sidePanelSubPageStackForActiveSidePanelPageSelector.ts new file mode 100644 index 0000000000..afd5de9316 --- /dev/null +++ b/packages/twenty-front/src/modules/side-panel/states/sidePanelSubPageStackForActiveSidePanelPageSelector.ts @@ -0,0 +1,22 @@ +import { isNonEmptyString } from '@sniptt/guards'; + +import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState'; +import { sidePanelSubPageStackComponentState } from '@/side-panel/states/sidePanelSubPageStackComponentState'; +import { type SidePanelSubPageEntry } from '@/side-panel/types/SidePanelSubPageEntry'; +import { createAtomSelector } from '@/ui/utilities/state/jotai/utils/createAtomSelector'; + +export const sidePanelSubPageStackForActiveSidePanelPageSelector = + createAtomSelector({ + key: 'sidePanelSubPageStackForActiveSidePanelPage', + get: ({ get }) => { + const pageInfo = get(sidePanelPageInfoState); + + if (!isNonEmptyString(pageInfo.instanceId)) { + return []; + } + + return get(sidePanelSubPageStackComponentState, { + instanceId: pageInfo.instanceId, + }); + }, + }); diff --git a/packages/twenty-front/src/modules/side-panel/types/SidePanelSubPages.ts b/packages/twenty-front/src/modules/side-panel/types/SidePanelSubPages.ts index 9c4fcd2f61..4dc50e009b 100644 --- a/packages/twenty-front/src/modules/side-panel/types/SidePanelSubPages.ts +++ b/packages/twenty-front/src/modules/side-panel/types/SidePanelSubPages.ts @@ -3,6 +3,7 @@ export enum SidePanelSubPages { PageLayoutFieldsLayout = 'page-layout-fields-layout', PageLayoutRecordTableFilter = 'page-layout-record-table-filter', PageLayoutRecordTableSort = 'page-layout-record-table-sort', + NewSidebarItemMainMenu = 'new-sidebar-item-main-menu', NewSidebarItemViewObjectPicker = 'new-sidebar-item-view-object-picker', NewSidebarItemViewPicker = 'new-sidebar-item-view-picker', NewSidebarItemViewSystemPicker = 'new-sidebar-item-view-system-picker', diff --git a/packages/twenty-front/src/modules/side-panel/utils/getSidePanelSubPageTitle.ts b/packages/twenty-front/src/modules/side-panel/utils/getSidePanelSubPageTitle.ts index 8fb2ed34cf..4feda1dd83 100644 --- a/packages/twenty-front/src/modules/side-panel/utils/getSidePanelSubPageTitle.ts +++ b/packages/twenty-front/src/modules/side-panel/utils/getSidePanelSubPageTitle.ts @@ -14,6 +14,8 @@ export const getSidePanelSubPageTitle = ( return t`Filters`; case SidePanelSubPages.PageLayoutRecordTableSort: return t`Sorts`; + case SidePanelSubPages.NewSidebarItemMainMenu: + return t`Add menu item`; case SidePanelSubPages.NewSidebarItemViewObjectPicker: return t`Pick an object`; case SidePanelSubPages.NewSidebarItemViewPicker: