Tt call recording app (#18281)

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
Co-authored-by: Weiko <corentin@twenty.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,9 +1,10 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { viewableFrontComponentIdComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentIdComponentState';
+import { viewableFrontComponentRecordContextComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentRecordContextComponentState';
+import { useStore } from 'jotai';
 import { CommandMenuPages } from 'twenty-shared/types';
 import { type IconComponent } from 'twenty-ui/display';
 import { v4 } from 'uuid';
-import { useStore } from 'jotai';
 
 export const useOpenFrontComponentInCommandMenu = () => {
   const store = useStore();
@@ -14,11 +15,16 @@ export const useOpenFrontComponentInCommandMenu = () => {
     pageTitle,
     pageIcon,
     resetNavigationStack = false,
+    recordContext,
   }: {
     frontComponentId: string;
     pageTitle: string;
     pageIcon: IconComponent;
     resetNavigationStack?: boolean;
+    recordContext?: {
+      recordId: string;
+      objectNameSingular: string;
+    };
   }) => {
     const pageComponentInstanceId = v4();
 
@@ -29,6 +35,13 @@ export const useOpenFrontComponentInCommandMenu = () => {
       frontComponentId,
     );
 
+    store.set(
+      viewableFrontComponentRecordContextComponentState.atomFamily({
+        instanceId: pageComponentInstanceId,
+      }),
+      recordContext ?? null,
+    );
+
     navigateCommandMenu({
       page: CommandMenuPages.ViewFrontComponent,
       pageTitle,

packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx

@@ -1,8 +1,11 @@
 import { Suspense, lazy } from 'react';
 
 import { viewableFrontComponentIdComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentIdComponentState';
+import { viewableFrontComponentRecordContextComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentRecordContextComponentState';
+import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { isDefined } from 'twenty-shared/utils';
+import { PageLayoutType } from '~/generated-metadata/graphql';
 
 const FrontComponentRenderer = lazy(() =>
   import('@/front-components/components/FrontComponentRenderer').then(
@@ -15,13 +18,31 @@ export const CommandMenuFrontComponentPage = () => {
     viewableFrontComponentIdComponentState,
   );
 
+  const viewableFrontComponentRecordContext = useAtomComponentStateValue(
+    viewableFrontComponentRecordContextComponentState,
+  );
+
   if (!isDefined(viewableFrontComponentId)) {
     return null;
   }
 
   return (
-    <Suspense fallback={null}>
-      <FrontComponentRenderer frontComponentId={viewableFrontComponentId} />
-    </Suspense>
+    <LayoutRenderingProvider
+      value={{
+        targetRecordIdentifier: isDefined(viewableFrontComponentRecordContext)
+          ? {
+              id: viewableFrontComponentRecordContext.recordId,
+              targetObjectNameSingular:
+                viewableFrontComponentRecordContext.objectNameSingular,
+            }
+          : undefined,
+        layoutType: PageLayoutType.DASHBOARD,
+        isInRightDrawer: true,
+      }}
+    >
+      <Suspense fallback={null}>
+        <FrontComponentRenderer frontComponentId={viewableFrontComponentId} />
+      </Suspense>
+    </LayoutRenderingProvider>
   );
 };

packages/twenty-front/src/modules/command-menu/pages/front-component/states/viewableFrontComponentRecordContextComponentState.ts

@@ -0,0 +1,14 @@
+import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
+import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
+
+type FrontComponentRecordContext = {
+  recordId: string;
+  objectNameSingular: string;
+};
+
+export const viewableFrontComponentRecordContextComponentState =
+  createAtomComponentState<FrontComponentRecordContext | null>({
+    key: 'command-menu/viewable-front-component-record-context',
+    defaultValue: null,
+    componentInstanceContext: CommandMenuPageComponentInstanceContext,
+  });