321 command menu context chips compact version (#10072)

Closes https://github.com/twentyhq/core-team-issues/issues/321

- Create component
- Create stories
- Fix bug due to `WorkflowDiagramCanvasEditableEffect`

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

@@ -23,8 +23,9 @@ import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
 import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
+import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared';
-import { IconSearch } from 'twenty-ui';
+import { IconDotsVertical, IconList, IconSearch } from 'twenty-ui';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 
 export const useCommandMenu = () => {
@@ -123,6 +124,14 @@ export const useCommandMenu = () => {
     [openCommandMenu],
   );
 
+  const openRootCommandMenu = useCallback(() => {
+    navigateCommandMenu({
+      page: CommandMenuPages.Root,
+      pageTitle: 'Command Menu',
+      pageIcon: IconDotsVertical,
+    });
+  }, [navigateCommandMenu]);
+
   const toggleCommandMenu = useRecoilCallback(
     ({ snapshot, set }) =>
       async () => {
@@ -135,12 +144,10 @@ export const useCommandMenu = () => {
         if (isCommandMenuOpened) {
           closeCommandMenu();
         } else {
-          navigateCommandMenu({
-            page: CommandMenuPages.Root,
-          });
+          openRootCommandMenu();
         }
       },
-    [closeCommandMenu, navigateCommandMenu],
+    [closeCommandMenu, openRootCommandMenu],
   );
 
   const goBackFromCommandMenu = useRecoilCallback(
@@ -204,6 +211,8 @@ export const useCommandMenu = () => {
         set(viewableRecordIdState, recordId);
         navigateCommandMenu({
           page: CommandMenuPages.ViewRecord,
+          pageTitle: objectNameSingular,
+          pageIcon: IconList,
         });
       };
     },
@@ -267,6 +276,7 @@ export const useCommandMenu = () => {
   );
 
   return {
+    openRootCommandMenu,
     closeCommandMenu,
     navigateCommandMenu,
     navigateCommandMenuHistory,