Refactor CommandMenuEditViewPickerSubView for Enhanced View Selection Logic

- Updated `CommandMenuEditViewPickerSubView` to integrate local handling of view selection, improving clarity and reducing reliance on external props.
- Introduced a new `handleSelectView` function to streamline view selection and state management.
- Utilized `useRecoilValue` for managing the selected navigation menu item in edit mode, enhancing state management and code maintainability.
- These changes contribute to a more organized and efficient implementation of the CommandMenuEditViewPickerSubView component.

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditViewPickerSubView.tsx

@@ -1,4 +1,5 @@
 import { useLingui } from '@lingui/react/macro';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
 
@@ -6,8 +7,12 @@ import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { useNavigationMenuItemEditSubView } from '@/command-menu/pages/navigation-menu-item/hooks/useNavigationMenuItemEditSubView';
 import { useSelectedNavigationMenuItemEditData } from '@/command-menu/pages/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditData';
+import { useUpdateNavigationMenuItemsDraft } from '@/navigation-menu-item/hooks/useUpdateNavigationMenuItemsDraft';
 import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/hooks/useNavigationMenuObjectMetadataFromDraft';
+import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { type View } from '@/views/types/View';
@@ -17,26 +22,30 @@ import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 type CommandMenuEditViewPickerSubViewProps = {
   currentDraft: { id: string; viewId?: string | null }[];
   selectedObjectMetadataIdForViewEdit: string | null;
-  currentItemId: string | undefined;
   objectMetadataItems: ObjectMetadataItem[];
   searchValue: string;
   onSearchChange: (value: string) => void;
   onBack: () => void;
-  onSelectView: (view: View) => void;
+  onClearObjectMetadataForViewEdit: () => void;
 };
 
 export const CommandMenuEditViewPickerSubView = ({
   currentDraft,
   selectedObjectMetadataIdForViewEdit,
-  currentItemId,
   objectMetadataItems,
   searchValue,
   onSearchChange,
   onBack,
-  onSelectView,
+  onClearObjectMetadataForViewEdit,
 }: CommandMenuEditViewPickerSubViewProps) => {
   const { t } = useLingui();
   const { getIcon } = useIcons();
+  const { closeCommandMenu } = useCommandMenu();
+  const { clearSubView } = useNavigationMenuItemEditSubView();
+  const { updateViewInDraft } = useUpdateNavigationMenuItemsDraft();
+  const selectedNavigationMenuItemInEditMode = useRecoilValue(
+    selectedNavigationMenuItemInEditModeState,
+  );
   const { selectedItemType, selectedItemObjectMetadata } =
     useSelectedNavigationMenuItemEditData();
   const { views } = useNavigationMenuObjectMetadataFromDraft(currentDraft);
@@ -49,7 +58,8 @@ export const CommandMenuEditViewPickerSubView = ({
   const viewIdsInOtherSidebarItems = new Set(
     currentDraft.flatMap((item) =>
       isDefined(item.viewId) &&
-      (currentItemId === undefined || item.id !== currentItemId)
+      (selectedNavigationMenuItemInEditMode === undefined ||
+        item.id !== selectedNavigationMenuItemInEditMode)
         ? [item.viewId]
         : [],
     ),
@@ -96,6 +106,15 @@ export const CommandMenuEditViewPickerSubView = ({
       ? t`No results found`
       : t`No custom views available`;
 
+  const handleSelectView = (view: View) => {
+    if (isDefined(selectedNavigationMenuItemInEditMode)) {
+      updateViewInDraft(selectedNavigationMenuItemInEditMode, view);
+      onClearObjectMetadataForViewEdit();
+      clearSubView();
+      closeCommandMenu();
+    }
+  };
+
   return (
     <CommandMenuSubViewWithSearch
       backBarTitle={backBarTitle}
@@ -115,13 +134,13 @@ export const CommandMenuEditViewPickerSubView = ({
             <SelectableListItem
               key={view.id}
               itemId={view.id}
-              onEnter={() => onSelectView(view)}
+              onEnter={() => handleSelectView(view)}
             >
               <CommandMenuItem
                 Icon={getIcon(view.icon)}
                 label={view.name}
                 id={view.id}
-                onClick={() => onSelectView(view)}
+                onClick={() => handleSelectView(view)}
               />
             </SelectableListItem>
           ))}

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx

@@ -26,7 +26,6 @@ import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/s
 import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { type View } from '@/views/types/View';
 
 const StyledCommandMenuPlaceholder = styled.p`
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -95,7 +94,7 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
     currentDraft ?? [],
   );
 
-  const { updateObjectInDraft, updateViewInDraft, updateLinkInDraft } =
+  const { updateObjectInDraft, updateLinkInDraft } =
     useUpdateNavigationMenuItemsDraft();
   const { objectMetadataItems } = useObjectMetadataItems();
 
@@ -121,15 +120,6 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
     setViewPicker();
   };
 
-  const handleChangeView = (view: View) => {
-    if (isDefined(selectedNavigationMenuItemInEditMode)) {
-      updateViewInDraft(selectedNavigationMenuItemInEditMode, view);
-      setSelectedObjectMetadataIdForViewEdit(null);
-      clearSubView();
-      closeCommandMenu();
-    }
-  };
-
   const handleBackFromViewPicker = () => {
     if (isDefined(selectedObjectMetadataIdForViewEdit)) {
       setSelectedObjectMetadataIdForViewEdit(null);
@@ -196,12 +186,13 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
         selectedObjectMetadataIdForViewEdit={
           selectedObjectMetadataIdForViewEdit
         }
-        currentItemId={selectedNavigationMenuItemInEditMode}
         objectMetadataItems={objectMetadataItems}
         searchValue={viewSearchInput}
         onSearchChange={setViewSearchInput}
         onBack={handleBackFromViewPicker}
-        onSelectView={handleChangeView}
+        onClearObjectMetadataForViewEdit={() =>
+          setSelectedObjectMetadataIdForViewEdit(null)
+        }
       />
     );
   }