From f47608de073636f041968e9334c4b55b11817fa7 Mon Sep 17 00:00:00 2001 From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com> Date: Thu, 26 Mar 2026 22:19:50 +0530 Subject: [PATCH] Clear navbar edit selection when closing the side panel (#18940) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In navbar edit mode, selecting an item for edit stored selectedNavigationMenuItemIdInEditModeState (and related pending-insertion state). Closing the side panel did not reset those atoms, so the nav item stayed visually selected. Reset both when the panel closes so the highlight matches the closed panel; reopening in edit mode then starts from the generic “new item” entry unless the user picks an item again. --- ...eSidePanelCloseAnimationCompleteCleanup.ts | 42 +++++++++++++------ .../side-panel/hooks/useSidePanelMenu.ts | 2 - 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup.ts b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup.ts index 00a4f6393b..d4c3acfa71 100644 --- a/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup.ts +++ b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup.ts @@ -1,8 +1,20 @@ +import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates'; +import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; +import { addToNavPayloadRegistryState } from '@/navigation-menu-item/common/states/addToNavPayloadRegistryState'; +import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState'; +import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; +import { viewableRecordIdState } from '@/object-record/record-side-panel/states/viewableRecordIdState'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState'; +import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState'; +import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState'; import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId'; import { SIDE_PANEL_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/side-panel/constants/SidePanelContextChipGroupsDropdownId'; -import { SIDE_PANEL_SELECTABLE_LIST_ID } from '@/side-panel/constants/SidePanelSelectableListId'; import { SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelPreviousComponentInstanceId'; -import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates'; +import { SIDE_PANEL_SELECTABLE_LIST_ID } from '@/side-panel/constants/SidePanelSelectableListId'; +import { hasUserSelectedSidePanelListItemState } from '@/side-panel/states/hasUserSelectedSidePanelListItemState'; +import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState'; +import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState'; import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState'; import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState'; import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState'; @@ -10,19 +22,10 @@ import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState'; import { sidePanelSearchObjectFilterState } from '@/side-panel/states/sidePanelSearchObjectFilterState'; import { sidePanelSearchState } from '@/side-panel/states/sidePanelSearchState'; import { sidePanelShowHiddenObjectsState } from '@/side-panel/states/sidePanelShowHiddenObjectsState'; -import { hasUserSelectedSidePanelListItemState } from '@/side-panel/states/hasUserSelectedSidePanelListItemState'; -import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState'; -import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState'; -import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; -import { viewableRecordIdState } from '@/object-record/record-side-panel/states/viewableRecordIdState'; -import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState'; -import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState'; -import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; -import { emitSidePanelCloseEvent } from '@/ui/layout/side-panel/utils/emitSidePanelCloseEvent'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId'; +import { emitSidePanelCloseEvent } from '@/ui/layout/side-panel/utils/emitSidePanelCloseEvent'; import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState'; import { WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/workflow-actions/code-action/constants/WorkflowLogicFunctionTabListComponentId'; import { WorkflowLogicFunctionTabId } from '@/workflow/workflow-steps/workflow-actions/code-action/types/WorkflowLogicFunctionTabId'; @@ -41,6 +44,12 @@ export const useSidePanelCloseAnimationCompleteCleanup = () => { const { closeDropdown } = useCloseDropdown(); + const resetNavigationMenuItemState = () => { + store.set(selectedNavigationMenuItemIdInEditModeState.atom, null); + store.set(pendingInsertionNavigationMenuItemState.atom, null); + store.set(addToNavPayloadRegistryState.atom, new Map()); + }; + const sidePanelCloseAnimationCompleteCleanup = useCallback( (options?: { emitSidePanelCloseEvent?: boolean }) => { closeDropdown(SIDE_PANEL_CONTEXT_CHIP_GROUPS_DROPDOWN_ID); @@ -110,6 +119,7 @@ export const useSidePanelCloseAnimationCompleteCleanup = () => { store.set(sidePanelShowHiddenObjectsState.atom, false); store.set(sidePanelNavigationMorphItemsByPageState.atom, new Map()); store.set(sidePanelNavigationStackState.atom, []); + resetNavigationMenuItemState(); resetSelectedItem(); store.set(hasUserSelectedSidePanelListItemState.atom, false); @@ -136,7 +146,13 @@ export const useSidePanelCloseAnimationCompleteCleanup = () => { ); } }, - [closeDropdown, resetContextStoreStates, resetSelectedItem, store], + [ + closeDropdown, + resetContextStoreStates, + resetNavigationMenuItemState, + resetSelectedItem, + store, + ], ); return { 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 ab9964571c..fd43638e0d 100644 --- a/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts +++ b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts @@ -1,5 +1,4 @@ import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState'; -import { addToNavPayloadRegistryState } from '@/navigation-menu-item/common/states/addToNavPayloadRegistryState'; 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'; @@ -29,7 +28,6 @@ export const useSidePanelMenu = () => { const isSidePanelOpened = store.get(isSidePanelOpenedState.atom); if (isSidePanelOpened) { - store.set(addToNavPayloadRegistryState.atom, new Map()); store.set(isSidePanelOpenedState.atom, false); store.set(isSidePanelClosingState.atom, true); closeAnyOpenDropdown();