[FRONT COMPONENTS] Headless components (#18096)

## Description

- Add `isHeadless` field to `FrontComponent` entity so front components
can run without rendering UI in the command menu
- Introduce headless front component mounting logic:
`HeadlessFrontComponentMountRoot` at the application root,
`useMountHeadlessFrontComponent`, and `useUnmountHeadlessFrontComponent`
hooks to mount/unmount headless components
- Expand the SDK with new action components (`Action`, `ActionLink`,
`ActionOpenSidePanelPage`) and host communication functions
(`openSidePanelPage`, `unmountFrontComponent`)
- Move `CommandMenuPages` type to twenty-shared so the SDK can reference
it for side panel navigation

## Video QA



https://github.com/user-attachments/assets/4f9e3bb1-fcd1-42be-b3f4-a97e80c2add2

packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts

@@ -1,4 +1,4 @@
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import {
   type FrontComponentExecutionContext,
   type FrontComponentHostCommunicationApi,
@@ -6,14 +6,26 @@ import {
 import { type AppPath } from 'twenty-shared/types';
 
 import { currentUserState } from '@/auth/states/currentUserState';
+import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
+import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
+import { useUnmountHeadlessFrontComponent } from '@/front-components/hooks/useUnmountHeadlessFrontComponent';
+import { useIcons } from 'twenty-ui/display';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 
-export const useFrontComponentExecutionContext = (): {
+export const useFrontComponentExecutionContext = ({
+  frontComponentId,
+}: {
+  frontComponentId: string;
+}): {
   executionContext: FrontComponentExecutionContext;
   frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi;
 } => {
   const currentUser = useRecoilValue(currentUserState);
   const navigateApp = useNavigateApp();
+  const { navigateCommandMenu } = useNavigateCommandMenu();
+  const setCommandMenuSearchState = useSetRecoilState(commandMenuSearchState);
+  const { getIcon } = useIcons();
+  const unmountHeadlessFrontComponent = useUnmountHeadlessFrontComponent();
 
   const navigate: FrontComponentHostCommunicationApi['navigate'] = async (
     to,
@@ -29,13 +41,33 @@ export const useFrontComponentExecutionContext = (): {
     );
   };
 
+  const openSidePanelPage: FrontComponentHostCommunicationApi['openSidePanelPage'] =
+    async ({ page, pageTitle, pageIcon, shouldResetSearchState }) => {
+      navigateCommandMenu({
+        page,
+        pageTitle,
+        pageIcon: getIcon(pageIcon),
+      });
+
+      if (shouldResetSearchState === true) {
+        setCommandMenuSearchState('');
+      }
+    };
+
   const executionContext: FrontComponentExecutionContext = {
     userId: currentUser?.id ?? null,
   };
 
+  const unmountFrontComponent: FrontComponentHostCommunicationApi['unmountFrontComponent'] =
+    async () => {
+      unmountHeadlessFrontComponent(frontComponentId);
+    };
+
   const frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi =
     {
       navigate,
+      openSidePanelPage,
+      unmountFrontComponent,
     };
 
   return {