refactor!: rename Command Menu page/navigation layer to Side Panel (#18393)

2026-03-05 20:16:31 +05:30
parent 38ad0820c0
commit 5853891b02
675 changed files with 4894 additions and 4964 deletions
@@ -0,0 +1,94 @@
+import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { sidePanelSearchState } from '@/side-panel/states/sidePanelSearchState';
+import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
+import { addToNavPayloadRegistryState } from '@/navigation-menu-item/states/addToNavPayloadRegistryState';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
+import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState';
+import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown';
+import { emitSidePanelOpenEvent } from '@/ui/layout/side-panel/utils/emitSidePanelOpenEvent';
+import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { t } from '@lingui/core/macro';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { SidePanelPages } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+import { IconColumnInsertRight, IconDotsVertical } from 'twenty-ui/display';
+
+export const useSidePanelMenu = () => {
+  const store = useStore();
+  const { navigateSidePanel } = useNavigateSidePanel();
+  const { closeAnyOpenDropdown } = useCloseAnyOpenDropdown();
+
+  const { removeFocusItemFromFocusStackById } =
+    useRemoveFocusItemFromFocusStackById();
+
+  const closeSidePanelMenu = useCallback(() => {
+    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();
+      removeFocusItemFromFocusStackById({
+        focusId: SIDE_PANEL_FOCUS_ID,
+      });
+    }
+  }, [closeAnyOpenDropdown, removeFocusItemFromFocusStackById, store]);
+
+  const openSidePanelMenu = useCallback(() => {
+    emitSidePanelOpenEvent();
+    closeAnyOpenDropdown();
+    const isNavigationMenuInEditMode = store.get(
+      isNavigationMenuInEditModeState.atom,
+    );
+    const selectedNavigationItemId = store.get(
+      selectedNavigationMenuItemInEditModeState.atom,
+    );
+    if (isNavigationMenuInEditMode && isDefined(selectedNavigationItemId)) {
+      navigateSidePanel({
+        page: SidePanelPages.NavigationMenuItemEdit,
+        pageTitle: t`Edit`,
+        pageIcon: IconDotsVertical,
+        resetNavigationStack: true,
+      });
+    } else if (isNavigationMenuInEditMode) {
+      navigateSidePanel({
+        page: SidePanelPages.NavigationMenuAddItem,
+        pageTitle: t`New sidebar item`,
+        pageIcon: IconColumnInsertRight,
+        resetNavigationStack: true,
+      });
+    } else {
+      navigateSidePanel({
+        page: SidePanelPages.Root,
+        pageTitle: t`Command Menu`,
+        pageIcon: IconDotsVertical,
+        resetNavigationStack: true,
+      });
+    }
+  }, [closeAnyOpenDropdown, navigateSidePanel, store]);
+
+  const navigateSidePanelMenu = navigateSidePanel;
+
+  const toggleSidePanelMenu = useCallback(() => {
+    const isSidePanelOpened = store.get(isSidePanelOpenedState.atom);
+
+    store.set(sidePanelSearchState.atom, '');
+
+    if (isSidePanelOpened) {
+      closeSidePanelMenu();
+    } else {
+      openSidePanelMenu();
+    }
+  }, [closeSidePanelMenu, openSidePanelMenu, store]);
+
+  return {
+    openSidePanelMenu,
+    closeSidePanelMenu,
+    navigateSidePanelMenu,
+    toggleSidePanelMenu,
+  };
+};