Feat: Navbar customization (#17728)

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
Co-authored-by: Devessier <baptiste@devessier.fr>

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

@@ -1,12 +1,12 @@
 import { useRecoilCallback } from 'recoil';
 
-import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
-
 import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
 import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
+import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { addToNavPayloadRegistryState } from '@/navigation-menu-item/states/addToNavPayloadRegistryState';
 import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown';
 import { emitSidePanelOpenEvent } from '@/ui/layout/right-drawer/utils/emitSidePanelOpenEvent';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
@@ -29,6 +29,7 @@ export const useCommandMenu = () => {
           .getValue();
 
         if (isCommandMenuOpened) {
+          set(addToNavPayloadRegistryState, new Map());
           set(isCommandMenuOpenedState, false);
           set(isCommandMenuClosingState, true);
           closeAnyOpenDropdown();

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

@@ -86,6 +86,9 @@ export const useCommandMenuHotKeys = () => {
     },
     focusId: SIDE_PANEL_FOCUS_ID,
     dependencies: [goBackFromCommandMenu],
+    options: {
+      enableOnFormTags: false,
+    },
   });
 
   useHotkeysOnFocusedElement({
@@ -119,6 +122,7 @@ export const useCommandMenuHotKeys = () => {
     ],
     options: {
       preventDefault: false,
+      enableOnFormTags: false,
     },
   });
 };

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

@@ -0,0 +1,43 @@
+import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
+
+type UseFilteredPickerItemsParams<T> = {
+  items: T[];
+  searchQuery: string;
+  getSearchableValues: (item: T) => string[];
+  appendSelectableIds?: string[];
+};
+
+type UseFilteredPickerItemsResult<T> = {
+  filteredItems: T[];
+  selectableItemIds: string[];
+  isEmpty: boolean;
+  hasSearchQuery: boolean;
+};
+
+export const useFilteredPickerItems = <T extends { id: string }>({
+  items,
+  searchQuery,
+  getSearchableValues,
+  appendSelectableIds = [],
+}: UseFilteredPickerItemsParams<T>): UseFilteredPickerItemsResult<T> => {
+  const filteredItems = filterBySearchQuery({
+    items,
+    searchQuery,
+    getSearchableValues,
+  });
+
+  const selectableItemIds =
+    filteredItems.length > 0
+      ? [...filteredItems.map((item) => item.id), ...appendSelectableIds]
+      : appendSelectableIds;
+
+  const isEmpty = filteredItems.length === 0;
+  const hasSearchQuery = searchQuery.trim().length > 0;
+
+  return {
+    filteredItems,
+    selectableItemIds,
+    isEmpty,
+    hasSearchQuery,
+  };
+};