fix: fixed shortcuts population (#7016)

This PR fixes #6776 Screenshots: <img width="1728" alt="image" src="https://github.com/user-attachments/assets/ca061c30-ddb7-40ff-8c54-8b0d85d40864"> --------- Co-authored-by: sid0-0 <a@b.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-10-08 21:09:41 +05:30
parent 711ff5d957
commit e662f6ccb3
19 changed files with 380 additions and 245 deletions
--- a/packages/twenty-front/src/modules/app/components/App.tsx
+++ b/packages/twenty-front/src/modules/app/components/App.tsx
@ -0,0 +1,32 @@
+import { AppRouter } from '@/app/components/AppRouter';
+import { CaptchaProvider } from '@/captcha/components/CaptchaProvider';
+import { ApolloDevLogEffect } from '@/debug/components/ApolloDevLogEffect';
+import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
+import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
+import { ExceptionHandlerProvider } from '@/error-handler/components/ExceptionHandlerProvider';
+import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { HelmetProvider } from 'react-helmet-async';
+import { RecoilRoot } from 'recoil';
+import { IconsProvider } from 'twenty-ui';
+
+export const App = () => {
+  return (
+    <RecoilRoot>
+      <AppErrorBoundary>
+        <CaptchaProvider>
+          <RecoilDebugObserverEffect />
+          <ApolloDevLogEffect />
+          <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+            <IconsProvider>
+              <ExceptionHandlerProvider>
+                <HelmetProvider>
+                  <AppRouter />
+                </HelmetProvider>
+              </ExceptionHandlerProvider>
+            </IconsProvider>
+          </SnackBarProviderScope>
+        </CaptchaProvider>
+      </AppErrorBoundary>
+    </RecoilRoot>
+  );
+};
--- a/packages/twenty-front/src/modules/app/components/AppRouter.tsx
+++ b/packages/twenty-front/src/modules/app/components/AppRouter.tsx
@ -0,0 +1,27 @@
+import { createAppRouter } from '@/app/utils/createAppRouter';
+import { billingState } from '@/client-config/states/billingState';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { RouterProvider } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+
+export const AppRouter = () => {
+  const billing = useRecoilValue(billingState);
+  const isFreeAccessEnabled = useIsFeatureEnabled('IS_FREE_ACCESS_ENABLED');
+  const isCRMMigrationEnabled = useIsFeatureEnabled('IS_CRM_MIGRATION_ENABLED');
+  const isServerlessFunctionSettingsEnabled = useIsFeatureEnabled(
+    'IS_FUNCTION_SETTINGS_ENABLED',
+  );
+
+  const isBillingPageEnabled =
+    billing?.isBillingEnabled && !isFreeAccessEnabled;
+
+  return (
+    <RouterProvider
+      router={createAppRouter(
+        isBillingPageEnabled,
+        isCRMMigrationEnabled,
+        isServerlessFunctionSettingsEnabled,
+      )}
+    />
+  );
+};
--- a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
+++ b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
@ -0,0 +1,66 @@
+import { ApolloProvider } from '@/apollo/components/ApolloProvider';
+import { CommandMenuEffect } from '@/app/effect-components/CommandMenuEffect';
+import { GotoHotkeys } from '@/app/effect-components/GotoHotkeysEffect';
+import { PageChangeEffect } from '@/app/effect-components/PageChangeEffect';
+import { AuthProvider } from '@/auth/components/AuthProvider';
+import { ChromeExtensionSidecarEffect } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarEffect';
+import { ChromeExtensionSidecarProvider } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarProvider';
+import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
+import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect';
+import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect';
+import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
+import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
+import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
+import { DialogManager } from '@/ui/feedback/dialog-manager/components/DialogManager';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
+import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider';
+import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
+import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
+import { UserProvider } from '@/users/components/UserProvider';
+import { UserProviderEffect } from '@/users/components/UserProviderEffect';
+import { StrictMode } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+import { getPageTitleFromPath } from '~/utils/title-utils';
+
+export const AppRouterProviders = () => {
+  const { pathname } = useLocation();
+  const pageTitle = getPageTitleFromPath(pathname);
+
+  return (
+    <ApolloProvider>
+      <ClientConfigProviderEffect />
+      <ClientConfigProvider>
+        <ChromeExtensionSidecarEffect />
+        <ChromeExtensionSidecarProvider>
+          <UserProviderEffect />
+          <UserProvider>
+            <AuthProvider>
+              <ApolloMetadataClientProvider>
+                <ObjectMetadataItemsProvider>
+                  <PrefetchDataProvider>
+                    <AppThemeProvider>
+                      <SnackBarProvider>
+                        <DialogManagerScope dialogManagerScopeId="dialog-manager">
+                          <DialogManager>
+                            <StrictMode>
+                              <PromiseRejectionEffect />
+                              <CommandMenuEffect />
+                              <GotoHotkeys />
+                              <PageTitle title={pageTitle} />
+                              <Outlet />
+                            </StrictMode>
+                          </DialogManager>
+                        </DialogManagerScope>
+                      </SnackBarProvider>
+                    </AppThemeProvider>
+                  </PrefetchDataProvider>
+                  <PageChangeEffect />
+                </ObjectMetadataItemsProvider>
+              </ApolloMetadataClientProvider>
+            </AuthProvider>
+          </UserProvider>
+        </ChromeExtensionSidecarProvider>
+      </ClientConfigProvider>
+    </ApolloProvider>
+  );
+};
--- a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
+++ b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
@ -0,0 +1,362 @@
+import { lazy, Suspense } from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
+
+const SettingsAccountsCalendars = lazy(() =>
+  import('~/pages/settings/accounts/SettingsAccountsCalendars').then(
+    (module) => ({
+      default: module.SettingsAccountsCalendars,
+    }),
+  ),
+);
+
+const SettingsAccountsEmails = lazy(() =>
+  import('~/pages/settings/accounts/SettingsAccountsEmails').then((module) => ({
+    default: module.SettingsAccountsEmails,
+  })),
+);
+
+const SettingsNewAccount = lazy(() =>
+  import('~/pages/settings/accounts/SettingsNewAccount').then((module) => ({
+    default: module.SettingsNewAccount,
+  })),
+);
+
+const SettingsNewObject = lazy(() =>
+  import('~/pages/settings/data-model/SettingsNewObject').then((module) => ({
+    default: module.SettingsNewObject,
+  })),
+);
+
+const SettingsObjectDetailPage = lazy(() =>
+  import('~/pages/settings/data-model/SettingsObjectDetailPage').then(
+    (module) => ({
+      default: module.SettingsObjectDetailPage,
+    }),
+  ),
+);
+
+const SettingsObjectOverview = lazy(() =>
+  import('~/pages/settings/data-model/SettingsObjectOverview').then(
+    (module) => ({
+      default: module.SettingsObjectOverview,
+    }),
+  ),
+);
+
+const SettingsDevelopersApiKeyDetail = lazy(() =>
+  import(
+    '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail'
+  ).then((module) => ({
+    default: module.SettingsDevelopersApiKeyDetail,
+  })),
+);
+
+const SettingsDevelopersApiKeysNew = lazy(() =>
+  import(
+    '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew'
+  ).then((module) => ({
+    default: module.SettingsDevelopersApiKeysNew,
+  })),
+);
+
+const SettingsDevelopersWebhooksNew = lazy(() =>
+  import(
+    '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew'
+  ).then((module) => ({
+    default: module.SettingsDevelopersWebhooksNew,
+  })),
+);
+
+const Releases = lazy(() =>
+  import('~/pages/settings/Releases').then((module) => ({
+    default: module.Releases,
+  })),
+);
+
+const SettingsServerlessFunctions = lazy(() =>
+  import(
+    '~/pages/settings/serverless-functions/SettingsServerlessFunctions'
+  ).then((module) => ({ default: module.SettingsServerlessFunctions })),
+);
+
+const SettingsServerlessFunctionDetailWrapper = lazy(() =>
+  import(
+    '~/pages/settings/serverless-functions/SettingsServerlessFunctionDetailWrapper'
+  ).then((module) => ({
+    default: module.SettingsServerlessFunctionDetailWrapper,
+  })),
+);
+
+const SettingsServerlessFunctionsNew = lazy(() =>
+  import(
+    '~/pages/settings/serverless-functions/SettingsServerlessFunctionsNew'
+  ).then((module) => ({
+    default: module.SettingsServerlessFunctionsNew,
+  })),
+);
+
+const SettingsWorkspace = lazy(() =>
+  import('~/pages/settings/SettingsWorkspace').then((module) => ({
+    default: module.SettingsWorkspace,
+  })),
+);
+
+const SettingsWorkspaceMembers = lazy(() =>
+  import('~/pages/settings/SettingsWorkspaceMembers').then((module) => ({
+    default: module.SettingsWorkspaceMembers,
+  })),
+);
+
+const SettingsProfile = lazy(() =>
+  import('~/pages/settings/SettingsProfile').then((module) => ({
+    default: module.SettingsProfile,
+  })),
+);
+
+const SettingsAppearance = lazy(() =>
+  import(
+    '~/pages/settings/profile/appearance/components/SettingsAppearance'
+  ).then((module) => ({
+    default: module.SettingsAppearance,
+  })),
+);
+
+const SettingsAccounts = lazy(() =>
+  import('~/pages/settings/accounts/SettingsAccounts').then((module) => ({
+    default: module.SettingsAccounts,
+  })),
+);
+
+const SettingsBilling = lazy(() =>
+  import('~/pages/settings/SettingsBilling').then((module) => ({
+    default: module.SettingsBilling,
+  })),
+);
+
+const SettingsDevelopers = lazy(() =>
+  import('~/pages/settings/developers/SettingsDevelopers').then((module) => ({
+    default: module.SettingsDevelopers,
+  })),
+);
+
+const SettingsObjectEdit = lazy(() =>
+  import('~/pages/settings/data-model/SettingsObjectEdit').then((module) => ({
+    default: module.SettingsObjectEdit,
+  })),
+);
+
+const SettingsIntegrations = lazy(() =>
+  import('~/pages/settings/integrations/SettingsIntegrations').then(
+    (module) => ({
+      default: module.SettingsIntegrations,
+    }),
+  ),
+);
+
+const SettingsObjects = lazy(() =>
+  import('~/pages/settings/data-model/SettingsObjects').then((module) => ({
+    default: module.SettingsObjects,
+  })),
+);
+
+const SettingsDevelopersWebhooksDetail = lazy(() =>
+  import(
+    '~/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail'
+  ).then((module) => ({
+    default: module.SettingsDevelopersWebhooksDetail,
+  })),
+);
+
+const SettingsIntegrationDatabase = lazy(() =>
+  import('~/pages/settings/integrations/SettingsIntegrationDatabase').then(
+    (module) => ({
+      default: module.SettingsIntegrationDatabase,
+    }),
+  ),
+);
+
+const SettingsIntegrationNewDatabaseConnection = lazy(() =>
+  import(
+    '~/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection'
+  ).then((module) => ({
+    default: module.SettingsIntegrationNewDatabaseConnection,
+  })),
+);
+
+const SettingsIntegrationEditDatabaseConnection = lazy(() =>
+  import(
+    '~/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection'
+  ).then((module) => ({
+    default: module.SettingsIntegrationEditDatabaseConnection,
+  })),
+);
+
+const SettingsIntegrationShowDatabaseConnection = lazy(() =>
+  import(
+    '~/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection'
+  ).then((module) => ({
+    default: module.SettingsIntegrationShowDatabaseConnection,
+  })),
+);
+
+const SettingsObjectNewFieldStep1 = lazy(() =>
+  import(
+    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1'
+  ).then((module) => ({
+    default: module.SettingsObjectNewFieldStep1,
+  })),
+);
+
+const SettingsObjectNewFieldStep2 = lazy(() =>
+  import(
+    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2'
+  ).then((module) => ({
+    default: module.SettingsObjectNewFieldStep2,
+  })),
+);
+
+const SettingsObjectFieldEdit = lazy(() =>
+  import('~/pages/settings/data-model/SettingsObjectFieldEdit').then(
+    (module) => ({
+      default: module.SettingsObjectFieldEdit,
+    }),
+  ),
+);
+
+const SettingsCRMMigration = lazy(() =>
+  import('~/pages/settings/crm-migration/SettingsCRMMigration').then(
+    (module) => ({
+      default: module.SettingsCRMMigration,
+    }),
+  ),
+);
+
+type SettingsRoutesProps = {
+  isBillingEnabled?: boolean;
+  isCRMMigrationEnabled?: boolean;
+  isServerlessFunctionSettingsEnabled?: boolean;
+};
+
+export const SettingsRoutes = ({
+  isBillingEnabled,
+  isCRMMigrationEnabled,
+  isServerlessFunctionSettingsEnabled,
+}: SettingsRoutesProps) => (
+  <Suspense fallback={null}>
+    <Routes>
+      <Route path={SettingsPath.ProfilePage} element={<SettingsProfile />} />
+      <Route path={SettingsPath.Appearance} element={<SettingsAppearance />} />
+      <Route path={SettingsPath.Accounts} element={<SettingsAccounts />} />
+      <Route path={SettingsPath.NewAccount} element={<SettingsNewAccount />} />
+      <Route
+        path={SettingsPath.AccountsCalendars}
+        element={<SettingsAccountsCalendars />}
+      />
+      <Route
+        path={SettingsPath.AccountsEmails}
+        element={<SettingsAccountsEmails />}
+      />
+      {isBillingEnabled && (
+        <Route path={SettingsPath.Billing} element={<SettingsBilling />} />
+      )}
+      <Route
+        path={SettingsPath.WorkspaceMembersPage}
+        element={<SettingsWorkspaceMembers />}
+      />
+      <Route path={SettingsPath.Workspace} element={<SettingsWorkspace />} />
+      <Route path={SettingsPath.Objects} element={<SettingsObjects />} />
+      <Route
+        path={SettingsPath.ObjectOverview}
+        element={<SettingsObjectOverview />}
+      />
+      <Route
+        path={SettingsPath.ObjectDetail}
+        element={<SettingsObjectDetailPage />}
+      />
+      <Route path={SettingsPath.ObjectEdit} element={<SettingsObjectEdit />} />
+      <Route path={SettingsPath.NewObject} element={<SettingsNewObject />} />
+      <Route path={SettingsPath.Developers} element={<SettingsDevelopers />} />
+      {isCRMMigrationEnabled && (
+        <Route
+          path={SettingsPath.CRMMigration}
+          element={<SettingsCRMMigration />}
+        />
+      )}
+      <Route
+        path={AppPath.DevelopersCatchAll}
+        element={
+          <Routes>
+            <Route
+              path={SettingsPath.DevelopersNewApiKey}
+              element={<SettingsDevelopersApiKeysNew />}
+            />
+            <Route
+              path={SettingsPath.DevelopersApiKeyDetail}
+              element={<SettingsDevelopersApiKeyDetail />}
+            />
+            <Route
+              path={SettingsPath.DevelopersNewWebhook}
+              element={<SettingsDevelopersWebhooksNew />}
+            />
+            <Route
+              path={SettingsPath.DevelopersNewWebhookDetail}
+              element={<SettingsDevelopersWebhooksDetail />}
+            />
+          </Routes>
+        }
+      />
+      {isServerlessFunctionSettingsEnabled && (
+        <>
+          <Route
+            path={SettingsPath.ServerlessFunctions}
+            element={<SettingsServerlessFunctions />}
+          />
+          <Route
+            path={SettingsPath.NewServerlessFunction}
+            element={<SettingsServerlessFunctionsNew />}
+          />
+          <Route
+            path={SettingsPath.ServerlessFunctionDetail}
+            element={<SettingsServerlessFunctionDetailWrapper />}
+          />
+        </>
+      )}
+      <Route
+        path={SettingsPath.Integrations}
+        element={<SettingsIntegrations />}
+      />
+      <Route
+        path={SettingsPath.IntegrationDatabase}
+        element={<SettingsIntegrationDatabase />}
+      />
+      <Route
+        path={SettingsPath.IntegrationNewDatabaseConnection}
+        element={<SettingsIntegrationNewDatabaseConnection />}
+      />
+      <Route
+        path={SettingsPath.IntegrationEditDatabaseConnection}
+        element={<SettingsIntegrationEditDatabaseConnection />}
+      />
+      <Route
+        path={SettingsPath.IntegrationDatabaseConnection}
+        element={<SettingsIntegrationShowDatabaseConnection />}
+      />
+      <Route
+        path={SettingsPath.ObjectNewFieldStep1}
+        element={<SettingsObjectNewFieldStep1 />}
+      />
+      <Route
+        path={SettingsPath.ObjectNewFieldStep2}
+        element={<SettingsObjectNewFieldStep2 />}
+      />
+      <Route
+        path={SettingsPath.ObjectFieldEdit}
+        element={<SettingsObjectFieldEdit />}
+      />
+      <Route path={SettingsPath.Releases} element={<Releases />} />
+    </Routes>
+  </Suspense>
+);
--- a/packages/twenty-front/src/modules/app/effect-components/CommandMenuEffect.tsx
+++ b/packages/twenty-front/src/modules/app/effect-components/CommandMenuEffect.tsx
@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
+import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
+
+export const CommandMenuEffect = () => {
+  const setCommands = useSetRecoilState(commandMenuCommandsState);
+
+  const commands = Object.values(COMMAND_MENU_COMMANDS);
+  useEffect(() => {
+    setCommands(commands);
+  }, [commands, setCommands]);
+
+  return <></>;
+};
--- a/packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx
+++ b/packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx
@ -0,0 +1,12 @@
+import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys';
+
+export const GoToHotkeyItemEffect = (props: {
+  hotkey: string;
+  pathToNavigateTo: string;
+}) => {
+  const { hotkey, pathToNavigateTo } = props;
+
+  useGoToHotkeys(hotkey, pathToNavigateTo);
+
+  return <></>;
+};
--- a/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx
+++ b/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx
@ -0,0 +1,18 @@
+import { GoToHotkeyItemEffect } from '@/app/effect-components/GoToHotkeyItemEffect';
+import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems';
+import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys';
+
+export const GotoHotkeys = () => {
+  const { nonSystemActiveObjectMetadataItems } =
+    useNonSystemActiveObjectMetadataItems();
+
+  // Hardcoded since settings is static
+  useGoToHotkeys('s', '/settings/profile');
+
+  return nonSystemActiveObjectMetadataItems.map((objectMetadataItem) => (
+    <GoToHotkeyItemEffect
+      hotkey={objectMetadataItem.namePlural[0]}
+      pathToNavigateTo={`/objects/${objectMetadataItem.namePlural}`}
+    />
+  ));
+};
--- a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx
+++ b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx
@ -0,0 +1,209 @@
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { IconCheckbox } from 'twenty-ui';
+
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import {
+  setSessionId,
+  useEventTracker,
+} from '@/analytics/hooks/useEventTracker';
+import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
+import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { CommandType } from '@/command-menu/types/Command';
+import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
+import { AppBasePath } from '@/types/AppBasePath';
+import { AppPath } from '@/types/AppPath';
+import { PageHotkeyScope } from '@/types/PageHotkeyScope';
+import { SettingsPath } from '@/types/SettingsPath';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useCleanRecoilState } from '~/hooks/useCleanRecoilState';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';
+import { isDefined } from '~/utils/isDefined';
+
+// TODO: break down into smaller functions and / or hooks
+//  - moved usePageChangeEffectNavigateLocation into dedicated hook
+export const PageChangeEffect = () => {
+  const navigate = useNavigate();
+  const isMatchingLocation = useIsMatchingLocation();
+
+  const [previousLocation, setPreviousLocation] = useState('');
+
+  const setHotkeyScope = useSetHotkeyScope();
+
+  const location = useLocation();
+
+  const pageChangeEffectNavigateLocation =
+    usePageChangeEffectNavigateLocation();
+
+  const { cleanRecoilState } = useCleanRecoilState();
+
+  const eventTracker = useEventTracker();
+
+  const { addToCommandMenu, setObjectsInCommandMenu } = useCommandMenu();
+
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  const openCreateActivity = useOpenCreateActivityDrawer({
+    activityObjectNameSingular: CoreObjectNameSingular.Task,
+  });
+
+  useEffect(() => {
+    cleanRecoilState();
+  }, [cleanRecoilState]);
+
+  useEffect(() => {
+    if (!previousLocation || previousLocation !== location.pathname) {
+      setPreviousLocation(location.pathname);
+    } else {
+      return;
+    }
+  }, [location, previousLocation]);
+
+  useEffect(() => {
+    if (isDefined(pageChangeEffectNavigateLocation)) {
+      navigate(pageChangeEffectNavigateLocation);
+    }
+  }, [navigate, pageChangeEffectNavigateLocation]);
+
+  useEffect(() => {
+    switch (true) {
+      case isMatchingLocation(AppPath.RecordIndexPage): {
+        setHotkeyScope(TableHotkeyScope.Table, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
+        break;
+      }
+      case isMatchingLocation(AppPath.RecordShowPage): {
+        setHotkeyScope(PageHotkeyScope.CompanyShowPage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
+        break;
+      }
+      case isMatchingLocation(AppPath.OpportunitiesPage): {
+        setHotkeyScope(PageHotkeyScope.OpportunitiesPage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
+        break;
+      }
+      case isMatchingLocation(AppPath.TasksPage): {
+        setHotkeyScope(PageHotkeyScope.TaskPage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
+        break;
+      }
+
+      case isMatchingLocation(AppPath.SignInUp): {
+        setHotkeyScope(PageHotkeyScope.SignInUp);
+        break;
+      }
+      case isMatchingLocation(AppPath.Invite): {
+        setHotkeyScope(PageHotkeyScope.SignInUp);
+        break;
+      }
+      case isMatchingLocation(AppPath.CreateProfile): {
+        setHotkeyScope(PageHotkeyScope.CreateProfile);
+        break;
+      }
+      case isMatchingLocation(AppPath.CreateWorkspace): {
+        setHotkeyScope(PageHotkeyScope.CreateWokspace);
+        break;
+      }
+      case isMatchingLocation(AppPath.SyncEmails): {
+        setHotkeyScope(PageHotkeyScope.SyncEmail);
+        break;
+      }
+      case isMatchingLocation(AppPath.InviteTeam): {
+        setHotkeyScope(PageHotkeyScope.InviteTeam);
+        break;
+      }
+      case isMatchingLocation(AppPath.PlanRequired): {
+        setHotkeyScope(PageHotkeyScope.PlanRequired);
+        break;
+      }
+      case isMatchingLocation(SettingsPath.ProfilePage, AppBasePath.Settings): {
+        setHotkeyScope(PageHotkeyScope.ProfilePage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
+        break;
+      }
+      case isMatchingLocation(
+        SettingsPath.WorkspaceMembersPage,
+        AppBasePath.Settings,
+      ): {
+        setHotkeyScope(PageHotkeyScope.WorkspaceMemberPage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
+        break;
+      }
+    }
+  }, [isMatchingLocation, setHotkeyScope]);
+
+  const { nonSystemActiveObjectMetadataItems } =
+    useNonSystemActiveObjectMetadataItems();
+
+  useEffect(() => {
+    setObjectsInCommandMenu(nonSystemActiveObjectMetadataItems);
+
+    addToCommandMenu([
+      {
+        id: 'create-task',
+        to: '',
+        label: 'Create Task',
+        type: CommandType.Create,
+        Icon: IconCheckbox,
+        onCommandClick: () =>
+          openCreateActivity({
+            targetableObjects: [],
+          }),
+      },
+    ]);
+  }, [
+    nonSystemActiveObjectMetadataItems,
+    addToCommandMenu,
+    setObjectsInCommandMenu,
+    openCreateActivity,
+    objectMetadataItems,
+  ]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setSessionId();
+      eventTracker('pageview', {
+        pathname: location.pathname,
+        locale: navigator.language,
+        userAgent: window.navigator.userAgent,
+        href: window.location.href,
+        referrer: document.referrer,
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      });
+    }, 500);
+  }, [eventTracker, location.pathname]);
+
+  const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken();
+  const isCaptchaScriptLoaded = useRecoilValue(isCaptchaScriptLoadedState);
+
+  useEffect(() => {
+    if (
+      isCaptchaScriptLoaded &&
+      (isMatchingLocation(AppPath.SignInUp) ||
+        isMatchingLocation(AppPath.Invite) ||
+        isMatchingLocation(AppPath.ResetPassword))
+    ) {
+      requestFreshCaptchaToken();
+    }
+  }, [isCaptchaScriptLoaded, isMatchingLocation, requestFreshCaptchaToken]);
+
+  return <></>;
+};
--- a/packages/twenty-front/src/modules/app/utils/createAppRouter.tsx
+++ b/packages/twenty-front/src/modules/app/utils/createAppRouter.tsx
@ -0,0 +1,78 @@
+import { AppRouterProviders } from '@/app/components/AppRouterProviders';
+import { SettingsRoutes } from '@/app/components/SettingsRoutes';
+import { VerifyEffect } from '@/auth/components/VerifyEffect';
+import indexAppPath from '@/navigation/utils/indexAppPath';
+import { AppPath } from '@/types/AppPath';
+import { BlankLayout } from '@/ui/layout/page/BlankLayout';
+import { DefaultLayout } from '@/ui/layout/page/DefaultLayout';
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+} from 'react-router-dom';
+import { Authorize } from '~/pages/auth/Authorize';
+import { Invite } from '~/pages/auth/Invite';
+import { PasswordReset } from '~/pages/auth/PasswordReset';
+import { SignInUp } from '~/pages/auth/SignInUp';
+import { ImpersonateEffect } from '~/pages/impersonate/ImpersonateEffect';
+import { NotFound } from '~/pages/not-found/NotFound';
+import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
+import { RecordShowPage } from '~/pages/object-record/RecordShowPage';
+import { ChooseYourPlan } from '~/pages/onboarding/ChooseYourPlan';
+import { CreateProfile } from '~/pages/onboarding/CreateProfile';
+import { CreateWorkspace } from '~/pages/onboarding/CreateWorkspace';
+import { InviteTeam } from '~/pages/onboarding/InviteTeam';
+import { PaymentSuccess } from '~/pages/onboarding/PaymentSuccess';
+import { SyncEmails } from '~/pages/onboarding/SyncEmails';
+
+export const createAppRouter = (
+  isBillingEnabled?: boolean,
+  isCRMMigrationEnabled?: boolean,
+  isServerlessFunctionSettingsEnabled?: boolean,
+) =>
+  createBrowserRouter(
+    createRoutesFromElements(
+      <Route
+        element={<AppRouterProviders />}
+        // To switch state to `loading` temporarily to enable us
+        // to set scroll position before the page is rendered
+        loader={async () => Promise.resolve(null)}
+      >
+        <Route element={<DefaultLayout />}>
+          <Route path={AppPath.Verify} element={<VerifyEffect />} />
+          <Route path={AppPath.SignInUp} element={<SignInUp />} />
+          <Route path={AppPath.Invite} element={<Invite />} />
+          <Route path={AppPath.ResetPassword} element={<PasswordReset />} />
+          <Route path={AppPath.CreateWorkspace} element={<CreateWorkspace />} />
+          <Route path={AppPath.CreateProfile} element={<CreateProfile />} />
+          <Route path={AppPath.SyncEmails} element={<SyncEmails />} />
+          <Route path={AppPath.InviteTeam} element={<InviteTeam />} />
+          <Route path={AppPath.PlanRequired} element={<ChooseYourPlan />} />
+          <Route
+            path={AppPath.PlanRequiredSuccess}
+            element={<PaymentSuccess />}
+          />
+          <Route path={indexAppPath.getIndexAppPath()} element={<></>} />
+          <Route path={AppPath.Impersonate} element={<ImpersonateEffect />} />
+          <Route path={AppPath.RecordIndexPage} element={<RecordIndexPage />} />
+          <Route path={AppPath.RecordShowPage} element={<RecordShowPage />} />
+          <Route
+            path={AppPath.SettingsCatchAll}
+            element={
+              <SettingsRoutes
+                isBillingEnabled={isBillingEnabled}
+                isCRMMigrationEnabled={isCRMMigrationEnabled}
+                isServerlessFunctionSettingsEnabled={
+                  isServerlessFunctionSettingsEnabled
+                }
+              />
+            }
+          />
+          <Route path={AppPath.NotFoundWildcard} element={<NotFound />} />
+        </Route>
+        <Route element={<BlankLayout />}>
+          <Route path={AppPath.Authorize} element={<Authorize />} />
+        </Route>
+      </Route>,
+    ),
+  );
--- a/packages/twenty-front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { IconCheckbox, IconNotes } from 'twenty-ui';

 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@ -20,6 +20,7 @@ import {
 } from '~/testing/mock-data/users';
 import { sleep } from '~/utils/sleep';

+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CommandMenu } from '../CommandMenu';

 const companiesMock = getCompaniesMock();
@ -35,14 +36,21 @@ const meta: Meta<typeof CommandMenu> = {
      const setCurrentWorkspaceMember = useSetRecoilState(
        currentWorkspaceMemberState,
      );
-      const { addToCommandMenu, setToInitialCommandMenu, openCommandMenu } =
+      const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+      const { addToCommandMenu, setObjectsInCommandMenu, openCommandMenu } =
        useCommandMenu();

      setCurrentWorkspace(mockDefaultWorkspace);
      setCurrentWorkspaceMember(mockedWorkspaceMemberData);

      useEffect(() => {
-        setToInitialCommandMenu();
+        const nonSystemActiveObjects = objectMetadataItems.filter(
+          (object) => !object.isSystem && object.isActive,
+        );
+
+        setObjectsInCommandMenu(nonSystemActiveObjects);
+
        addToCommandMenu([
          {
            id: 'create-task',
@ -62,7 +70,12 @@ const meta: Meta<typeof CommandMenu> = {
          },
        ]);
        openCommandMenu();
-      }, [addToCommandMenu, setToInitialCommandMenu, openCommandMenu]);
+      }, [
+        addToCommandMenu,
+        setObjectsInCommandMenu,
+        openCommandMenu,
+        objectMetadataItems,
+      ]);

      return <Story />;
    },
--- a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuCommands.ts
+++ b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuCommands.ts
@ -8,8 +8,8 @@ import {

 import { Command, CommandType } from '../types/Command';

-export const COMMAND_MENU_COMMANDS: Command[] = [
-  {
+export const COMMAND_MENU_COMMANDS: { [key: string]: Command } = {
+  people: {
    id: 'go-to-people',
    to: '/objects/people',
    label: 'Go to People',
@ -18,7 +18,7 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
    secondHotKey: 'P',
    Icon: IconUser,
  },
-  {
+  companies: {
    id: 'go-to-companies',
    to: '/objects/companies',
    label: 'Go to Companies',
@ -27,7 +27,7 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
    secondHotKey: 'C',
    Icon: IconBuildingSkyscraper,
  },
-  {
+  opportunities: {
    id: 'go-to-activities',
    to: '/objects/opportunities',
    label: 'Go to Opportunities',
@ -36,7 +36,7 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
    secondHotKey: 'O',
    Icon: IconTargetArrow,
  },
-  {
+  settings: {
    id: 'go-to-settings',
    to: '/settings/profile',
    label: 'Go to Settings',
@ -45,7 +45,7 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
    secondHotKey: 'S',
    Icon: IconSettings,
  },
-  {
+  tasks: {
    id: 'go-to-tasks',
    to: '/objects/tasks',
    label: 'Go to Tasks',
@ -54,4 +54,4 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
    secondHotKey: 'T',
    Icon: IconCheckbox,
  },
-];
+};
--- a/packages/twenty-front/src/modules/command-menu/hooks/test/useCommandMenu.test.tsx
+++ b/packages/twenty-front/src/modules/command-menu/hooks/test/useCommandMenu.test.tsx
@ -1,6 +1,6 @@
+import { renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
-import { renderHook } from '@testing-library/react';
 import { RecoilRoot, useRecoilState, useRecoilValue } from 'recoil';

 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
@ -107,13 +107,39 @@ describe('useCommandMenu', () => {
    expect(onClickMock).toHaveBeenCalledTimes(1);
  });

-  it('should setToInitialCommandMenu command menu', () => {
+  it('should setObjectsInCommandMenu command menu', () => {
    const { result } = renderHooks();

    act(() => {
-      result.current.commandMenu.setToInitialCommandMenu();
+      result.current.commandMenu.setObjectsInCommandMenu([]);
    });

-    expect(result.current.commandMenuCommands.length).toBe(5);
+    expect(result.current.commandMenuCommands.length).toBe(1);
+
+    act(() => {
+      result.current.commandMenu.setObjectsInCommandMenu([
+        {
+          id: 'b88745ce-9021-4316-a018-8884e02d05ca',
+          nameSingular: 'task',
+          namePlural: 'tasks',
+          labelSingular: 'Task',
+          labelPlural: 'Tasks',
+          description: 'A task',
+          icon: 'IconCheckbox',
+          isCustom: false,
+          isRemote: false,
+          isActive: true,
+          isSystem: false,
+          createdAt: '2024-09-12T20:23:46.041Z',
+          updatedAt: '2024-09-13T08:36:53.426Z',
+          labelIdentifierFieldMetadataId:
+            'ab7901eb-43e1-4dc7-8f3b-cdee2857eb9a',
+          imageIdentifierFieldMetadataId: null,
+          fields: [],
+        },
+      ]);
+    });
+
+    expect(result.current.commandMenuCommands.length).toBe(2);
  });
 });
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
@ -1,6 +1,6 @@
+import { isNonEmptyString } from '@sniptt/guards';
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';

 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
@ -9,10 +9,13 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { isDefined } from '~/utils/isDefined';

-import { COMMAND_MENU_COMMANDS } from '../constants/CommandMenuCommands';
+import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { ALL_ICONS } from '@ui/display/icon/providers/internal/AllIcons';
+import { sortByProperty } from '~/utils/array/sortByProperty';
 import { commandMenuCommandsState } from '../states/commandMenuCommandsState';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
-import { Command } from '../types/Command';
+import { Command, CommandType } from '../types/Command';

 export const useCommandMenu = () => {
  const navigate = useNavigate();
@ -70,8 +73,27 @@ export const useCommandMenu = () => {
    [setCommands],
  );

-  const setToInitialCommandMenu = () => {
-    setCommands(COMMAND_MENU_COMMANDS);
+  const setObjectsInCommandMenu = (menuItems: ObjectMetadataItem[]) => {
+    const formattedItems = [
+      ...[
+        ...menuItems.map(
+          (item) =>
+            ({
+              id: item.id,
+              to: `/objects/${item.namePlural}`,
+              label: `Go to ${item.labelPlural}`,
+              type: CommandType.Navigate,
+              firstHotKey: 'G',
+              secondHotKey: item.labelPlural[0],
+              Icon: ALL_ICONS[
+                (item?.icon as keyof typeof ALL_ICONS) ?? 'IconArrowUpRight'
+              ],
+            }) as Command,
+        ),
+      ].sort(sortByProperty('label', 'asc')),
+      COMMAND_MENU_COMMANDS.settings,
+    ];
+    setCommands(formattedItems);
  };

  const onItemClick = useCallback(
@ -96,6 +118,6 @@ export const useCommandMenu = () => {
    toggleCommandMenu,
    addToCommandMenu,
    onItemClick,
-    setToInitialCommandMenu,
+    setObjectsInCommandMenu,
  };
 };
--- a/packages/twenty-front/src/modules/object-metadata/hooks/useNonSystemActiveObjectMetadataItems.ts
+++ b/packages/twenty-front/src/modules/object-metadata/hooks/useNonSystemActiveObjectMetadataItems.ts
@ -0,0 +1,20 @@
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+
+export const useNonSystemActiveObjectMetadataItems = () => {
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  const nonSystemActiveObjectMetadataItems = useMemo(
+    () =>
+      objectMetadataItems.filter(
+        (objectMetadataItem) =>
+          !objectMetadataItem.isSystem && objectMetadataItem.isActive,
+      ),
+    [objectMetadataItems],
+  );
+
+  return {
+    nonSystemActiveObjectMetadataItems,
+  };
+};