Refactor SidePanelEdit components to streamline props and imports

- Moved `SidePanelGroup` and `SidePanelList` imports to the correct location in `SidePanelEditLinkItemView.tsx`.
- Removed the `moveToFolderHasSubMenu` prop from `SidePanelEditOrganizeActions` and adjusted its usage accordingly.
- Simplified the handling of the `hasSubMenu` property in the `SelectableListItem` component.

.github/workflows/ci-ai-catalog-sync.yaml

@@ -27,11 +27,8 @@ jobs:
       - name: Build dependencies
         run: npx nx build twenty-shared
 
-      - name: Build twenty-server
-        run: npx nx build twenty-server
-
       - name: Run catalog sync
-        run: npx nx run twenty-server:command-no-deps ai:sync-models-dev
+        run: npx nx run twenty-server:ts-node-no-deps-transpile-only -- ./scripts/ai-sync-models-dev.ts
 
       - name: Check for changes
         id: changes
@@ -61,3 +58,11 @@ jobs:
           base: main
           labels: ai, automated
           delete-branch: true
+
+      - name: Trigger automerge
+        if: steps.changes.outputs.changed == 'true'
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ secrets.TWENTY_INFRA_TOKEN }}
+          repository: twentyhq/twenty-infra
+          event-type: automated-pr-ready

.github/workflows/ci-front.yaml

@@ -151,6 +151,40 @@ jobs:
   #         npx nyc merge coverage-artifacts ${{ env.PATH_TO_COVERAGE }}/coverage-storybook.json
   #     - name: Checking coverage
   #       run: npx nx storybook:coverage twenty-front --checkCoverage=true --configuration=${{ matrix.storybook_scope }}
+  visual-regression-dispatch:
+    needs: front-sb-build
+    if: github.event_name == 'pull_request'
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download storybook build
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-static
+          path: storybook-static
+      - name: Package storybook
+        run: tar -czf /tmp/storybook-twenty-front.tar.gz -C storybook-static .
+      - name: Upload storybook tarball
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-twenty-front-tarball
+          path: /tmp/storybook-twenty-front.tar.gz
+          retention-days: 1
+      - name: Dispatch to ci-privileged
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ secrets.CI_PRIVILEGED_DISPATCH_TOKEN }}
+          repository: twentyhq/ci-privileged
+          event-type: visual-regression
+          client-payload: >-
+            {
+              "pr_number": "${{ github.event.pull_request.number }}",
+              "run_id": "${{ github.run_id }}",
+              "repo": "${{ github.repository }}",
+              "project": "twenty-front",
+              "branch": "${{ github.head_ref }}",
+              "commit": "${{ github.event.pull_request.head.sha }}"
+            }
   front-task:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'

.github/workflows/ci-ui.yaml

@@ -0,0 +1,144 @@
+name: CI UI
+
+on:
+  pull_request:
+  merge_group:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+
+jobs:
+  changed-files-check:
+    if: github.event_name != 'merge_group'
+    uses: ./.github/workflows/changed-files.yaml
+    with:
+      files: |
+        package.json
+        yarn.lock
+        packages/twenty-ui/**
+        packages/twenty-shared/**
+  ui-task:
+    needs: changed-files-check
+    if: needs.changed-files-check.outputs.any_changed == 'true'
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        task: [lint, typecheck, test]
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ github.token }}
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 10
+      - name: Install dependencies
+        uses: ./.github/actions/yarn-install
+      - name: Run ${{ matrix.task }}
+        run: npx nx ${{ matrix.task }} twenty-ui
+  ui-sb-build:
+    needs: changed-files-check
+    if: needs.changed-files-check.outputs.any_changed == 'true'
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ github.token }}
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 10
+      - name: Install dependencies
+        uses: ./.github/actions/yarn-install
+      - name: Build storybook
+        run: npx nx storybook:build twenty-ui
+      - name: Upload storybook build
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-twenty-ui
+          path: packages/twenty-ui/storybook-static
+          retention-days: 1
+  ui-sb-test:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    needs: ui-sb-build
+    env:
+      STORYBOOK_URL: http://localhost:6007
+    steps:
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 10
+      - name: Install dependencies
+        uses: ./.github/actions/yarn-install
+      - name: Download storybook build
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-twenty-ui
+          path: packages/twenty-ui/storybook-static
+      - name: Install Playwright
+        run: |
+          cd packages/twenty-ui
+          npx playwright install
+      - name: Serve storybook & run tests
+        run: |
+          npx http-server packages/twenty-ui/storybook-static --port 6007 --silent &
+          timeout 30 bash -c 'until curl -sf http://localhost:6007 > /dev/null 2>&1; do sleep 1; done'
+          npx nx storybook:test twenty-ui
+  visual-regression-dispatch:
+    needs: ui-sb-build
+    if: github.event_name == 'pull_request'
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download storybook build
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-twenty-ui
+          path: storybook-static
+      - name: Package storybook
+        run: tar -czf /tmp/storybook-twenty-ui.tar.gz -C storybook-static .
+      - name: Upload storybook tarball
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-twenty-ui-tarball
+          path: /tmp/storybook-twenty-ui.tar.gz
+          retention-days: 1
+      - name: Dispatch to ci-privileged
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ secrets.CI_PRIVILEGED_DISPATCH_TOKEN }}
+          repository: twentyhq/ci-privileged
+          event-type: visual-regression
+          client-payload: >-
+            {
+              "pr_number": "${{ github.event.pull_request.number }}",
+              "run_id": "${{ github.run_id }}",
+              "repo": "${{ github.repository }}",
+              "project": "twenty-ui",
+              "branch": "${{ github.head_ref }}",
+              "commit": "${{ github.event.pull_request.head.sha }}"
+            }
+  ci-ui-status-check:
+    if: always() && !cancelled()
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    needs:
+      [
+        changed-files-check,
+        ui-task,
+        ui-sb-build,
+        ui-sb-test,
+      ]
+    steps:
+      - name: Fail job if any needs failed
+        if: contains(needs.*.result, 'failure')
+        run: exit 1

.github/workflows/docs-i18n-pull.yaml

@@ -150,3 +150,11 @@ jobs:
           fi
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Trigger i18n automerge
+        if: github.event_name != 'pull_request' && steps.check_changes.outputs.changes_detected == 'true'
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ secrets.TWENTY_INFRA_TOKEN }}
+          repository: twentyhq/twenty-infra
+          event-type: i18n-pr-ready

.github/workflows/i18n-pull.yaml

@@ -138,3 +138,11 @@ jobs:
           fi
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Trigger i18n automerge
+        if: steps.compile_translations.outputs.changes_detected == 'true'
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ secrets.TWENTY_INFRA_TOKEN }}
+          repository: twentyhq/twenty-infra
+          event-type: i18n-pr-ready

.github/workflows/i18n-push.yaml

@@ -102,3 +102,11 @@ jobs:
           fi
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Trigger i18n automerge
+        if: steps.check_extract_changes.outputs.changes_detected == 'true' || steps.check_compile_changes.outputs.changes_detected == 'true'
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ secrets.TWENTY_INFRA_TOKEN }}
+          repository: twentyhq/twenty-infra
+          event-type: i18n-pr-ready

packages/twenty-docker/twenty/Dockerfile

@@ -30,6 +30,11 @@ COPY ./packages/twenty-ui /app/packages/twenty-ui
 COPY ./packages/twenty-sdk /app/packages/twenty-sdk
 COPY ./packages/twenty-server /app/packages/twenty-server
 
+RUN npx nx run twenty-server:lingui:extract && \
+    npx nx run twenty-server:lingui:compile && \
+    npx nx run twenty-emails:lingui:extract && \
+    npx nx run twenty-emails:lingui:compile
+
 RUN npx nx run twenty-server:build
 
 RUN yarn workspaces focus --production twenty-emails twenty-shared twenty-sdk twenty-server
@@ -43,6 +48,8 @@ COPY ./packages/twenty-front /app/packages/twenty-front
 COPY ./packages/twenty-ui /app/packages/twenty-ui
 COPY ./packages/twenty-shared /app/packages/twenty-shared
 COPY ./packages/twenty-sdk /app/packages/twenty-sdk
+RUN npx nx run twenty-front:lingui:extract && \
+    npx nx run twenty-front:lingui:compile
 RUN npx nx build twenty-front
 
 

packages/twenty-e2e-testing/tests/create-record.spec.ts

@@ -6,8 +6,14 @@ const query = `query FindOnePerson($objectRecordId: UUID!) {
   person(
     filter: {or: [{deletedAt: {is: NULL}}, {deletedAt: {is: NOT_NULL}}], id: {eq: $objectRecordId}}
   ) {
-    company {
-      name
+    previousCompanies {
+      edges {
+        node {
+          company {
+            name
+          }
+        }
+      }
     }
     emails {
       primaryEmail
@@ -43,8 +49,8 @@ const query = `query FindOnePerson($objectRecordId: UUID!) {
 }`
 
 test('Create and update record', async ({ page }) => {
-    await page.getByRole('link', { name: 'People' }).click();
-    await page.getByRole('button', { name: 'Create new record' }).click();
+    await page.goto('/objects/people');
+    await page.getByRole('button', { name: 'Create new Person' }).click();
 
     // Generate a random email for testing
     const randomEmail = `testuser_${Math.random().toString(36).substring(2, 10)}@example.com`;
@@ -107,29 +113,17 @@ test('Create and update record', async ({ page }) => {
     await options.getByText('Hybrid').first().click({force: true});
     recordFieldList.getByText('Work Preference').first().click({force: true});
 
-    // Fill company relation
-    const companyRelationWidget = page.getByTestId(/dynamic-relation-widget-.+-Company/);
-    await expect(companyRelationWidget).toBeVisible();
+    // Fill previous companies
+    await recordFieldList.getByText('Previous Companies').first().click({force: true});
+    await recordFieldList.getByText('Previous Companies').nth(1).click({force: true});
+    await page.getByPlaceholder('Search').fill('VMw');
+    await page.getByRole('listbox').first().getByText('VMware').click({force: true});
+    await page.keyboard.press('Escape');
 
-    await companyRelationWidget.hover();
-    await companyRelationWidget.locator('.tabler-icon-pencil').click();
-    await page.getByRole('textbox', { name: 'Search' }).fill('VMw');
-    await expect(page.getByRole('option', { name: 'VMware' })).toBeVisible();
-    const [updatePersonResponse] = await Promise.all([
-      page.waitForResponse(async (response) => {
-        if (!response.url().endsWith('/graphql')) {
-          return false;
-        }
-
-        const requestBody = response.request().postDataJSON();
-
-        return requestBody.operationName === 'UpdateOnePerson';
-      }),
-      await page.getByRole('option', { name: 'VMware' }).click({force: true})
-    ]);
-
-    const body = await updatePersonResponse.json()
-    const newPersonId = body.data.updatePerson.id;
+    // Open full record page to get person ID
+    await page.getByRole('button', { name: /^Open/ }).click();
+    await page.waitForURL(/\/object\/person\//);
+    const newPersonId = page.url().match(/\/object\/person\/([a-f0-9-]+)/)?.[1];
 
     // Check data was saved
     const { authToken } = await getAccessAuthToken(page);
@@ -155,6 +149,6 @@ test('Create and update record', async ({ page }) => {
     expect(findOnePersonReponseBody.data.person.linkedinLink.primaryLinkUrl).toBe('linkedin.com/johndoe');
     expect(findOnePersonReponseBody.data.person.phones.primaryPhoneNumber).toBe('611223344');
     expect(findOnePersonReponseBody.data.person.workPreference).toEqual(['HYBRID']);
-    expect(findOnePersonReponseBody.data.person.company.name).toBe('VMware');
+    expect(findOnePersonReponseBody.data.person.previousCompanies.edges[0].node.company.name).toBe('VMware');
 
 });

packages/twenty-emails/project.json

@@ -38,6 +38,7 @@
     },
     "lingui:extract": {
       "executor": "nx:run-commands",
+      "dependsOn": ["^build"],
       "options": {
         "cwd": "{projectRoot}",
         "command": "lingui extract --overwrite --clean"
@@ -45,6 +46,7 @@
     },
     "lingui:compile": {
       "executor": "nx:run-commands",
+      "dependsOn": ["^build"],
       "options": {
         "cwd": "{projectRoot}",
         "command": "lingui compile --typescript"

packages/twenty-front/codegen-metadata.cjs

@@ -10,13 +10,11 @@ module.exports = {
     './src/modules/views/graphql/**/*.{ts,tsx}',
     './src/modules/ai/graphql/**/*.{ts,tsx}',
     './src/modules/applications/graphql/**/*.{ts,tsx}',
-    './src/modules/application-variables/graphql/**/*.{ts,tsx}',
 
     './src/modules/workspace/graphql/**/*.{ts,tsx}',
     './src/modules/workspace-member/graphql/**/*.{ts,tsx}',
     './src/modules/workspace-invitation/graphql/**/*.{ts,tsx}',
 
-    './src/modules/billing/graphql/**/*.{ts,tsx}',
     './src/modules/settings/**/graphql/**/*.{ts,tsx}',
     './src/modules/logic-functions/graphql/**/*.{ts,tsx}',
 

packages/twenty-front/project.json

@@ -292,6 +292,7 @@
     },
     "lingui:extract": {
       "executor": "nx:run-commands",
+      "dependsOn": ["^build"],
       "options": {
         "cwd": "{projectRoot}",
         "command": "lingui extract --overwrite --clean"
@@ -299,6 +300,7 @@
     },
     "lingui:compile": {
       "executor": "nx:run-commands",
+      "dependsOn": ["^build"],
       "options": {
         "cwd": "{projectRoot}",
         "command": "lingui compile --typescript"

packages/twenty-front/src/modules/ai/components/AIChatCreditsExhaustedMessage.tsx

@@ -1,5 +1,5 @@
 import { AIChatBanner } from '@/ai/components/AIChatBanner';
-import { useEndSubscriptionTrialPeriod } from '@/billing/hooks/useEndSubscriptionTrialPeriod';
+import { useEndSubscriptionTrialPeriod } from '@/settings/billing/hooks/useEndSubscriptionTrialPeriod';
 import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 import { usePermissionFlagMap } from '@/settings/roles/hooks/usePermissionFlagMap';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';

packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx

@@ -13,7 +13,7 @@ import {
   agentChatUsageState,
   type AgentChatLastMessageUsage,
 } from '@/ai/states/agentChatUsageState';
-import { SettingsBillingLabelValueItem } from '@/billing/components/internal/SettingsBillingLabelValueItem';
+import { SettingsBillingLabelValueItem } from '@/settings/billing/components/internal/SettingsBillingLabelValueItem';
 import { useAtomComponentSelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentSelectorValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { formatNumber } from '~/utils/format/formatNumber';

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -259,6 +259,18 @@ const SettingsBilling = lazy(() =>
   })),
 );
 
+const SettingsUsage = lazy(() =>
+  import('~/pages/settings/SettingsUsage').then((module) => ({
+    default: module.SettingsUsage,
+  })),
+);
+
+const SettingsUsageUserDetail = lazy(() =>
+  import('~/pages/settings/SettingsUsageUserDetail').then((module) => ({
+    default: module.SettingsUsageUserDetail,
+  })),
+);
+
 const SettingsObjects = lazy(() =>
   import('~/pages/settings/data-model/SettingsObjects').then((module) => ({
     default: module.SettingsObjects,
@@ -529,6 +541,19 @@ export const SettingsRoutes = ({ isAdminPageEnabled }: SettingsRoutesProps) => (
           element={<SettingsLogicFunctionDetail />}
         />
         <Route path={SettingsPath.Billing} element={<SettingsBilling />} />
+        <Route
+          element={
+            <SettingsProtectedRouteWrapper
+              requiredFeatureFlag={FeatureFlagKey.IS_USAGE_ANALYTICS_ENABLED}
+            />
+          }
+        >
+          <Route path={SettingsPath.Usage} element={<SettingsUsage />} />
+          <Route
+            path={SettingsPath.UsageUserDetail}
+            element={<SettingsUsageUserDetail />}
+          />
+        </Route>
         <Route
           path={SettingsPath.Subdomain}
           element={<SettingsSubdomainPage />}

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts

@@ -4,7 +4,7 @@ import { billingCheckoutSessionState } from '@/auth/states/billingCheckoutSessio
 import { returnToPathState } from '@/auth/states/returnToPathState';
 import { type BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { isValidReturnToPath } from '@/auth/utils/isValidReturnToPath';
-import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
+import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/settings/billing/constants/BillingCheckoutSessionDefaultValue';
 import deepEqual from 'deep-equal';
 import { useStore } from 'jotai';
 

packages/twenty-front/src/modules/auth/components/Title.tsx

@@ -15,6 +15,7 @@ const StyledTitle = styled.div<Pick<TitleProps, 'noMarginTop'>>`
   margin-bottom: ${themeCssVariables.spacing[4]};
   margin-top: ${({ noMarginTop }) =>
     !noMarginTop ? themeCssVariables.spacing[4] : '0'};
+  text-align: center;
 `;
 
 export const Title = ({

packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts

@@ -1,5 +1,5 @@
 import { type BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
-import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
+import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/settings/billing/constants/BillingCheckoutSessionDefaultValue';
 import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
 
 export const billingCheckoutSessionState =

packages/twenty-front/src/modules/domain-manager/hooks/useBuildSearchParamsFromUrlSyncedStates.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { billingCheckoutSessionState } from '@/auth/states/billingCheckoutSessionState';
 import { returnToPathState } from '@/auth/states/returnToPathState';
-import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
+import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/settings/billing/constants/BillingCheckoutSessionDefaultValue';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useStore } from 'jotai';
 

packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerEndTrialPeriod.tsx

@@ -1,4 +1,4 @@
-import { useEndSubscriptionTrialPeriod } from '@/billing/hooks/useEndSubscriptionTrialPeriod';
+import { useEndSubscriptionTrialPeriod } from '@/settings/billing/hooks/useEndSubscriptionTrialPeriod';
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
 import { usePermissionFlagMap } from '@/settings/roles/hooks/usePermissionFlagMap';
 import { useLingui } from '@lingui/react/macro';

packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerNoBillingSubscription.tsx

@@ -1,5 +1,5 @@
-import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
-import { useHandleCheckoutSession } from '@/billing/hooks/useHandleCheckoutSession';
+import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/settings/billing/constants/BillingCheckoutSessionDefaultValue';
+import { useHandleCheckoutSession } from '@/settings/billing/hooks/useHandleCheckoutSession';
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
 import { usePermissionFlagMap } from '@/settings/roles/hooks/usePermissionFlagMap';
 import { t } from '@lingui/core/macro';

packages/twenty-front/src/modules/layout-customization/hooks/useSaveLayoutCustomization.ts

@@ -1,9 +1,9 @@
 import { useExitLayoutCustomizationMode } from '@/layout-customization/hooks/useExitLayoutCustomizationMode';
 import { activeCustomizationPageLayoutIdsState } from '@/layout-customization/states/activeCustomizationPageLayoutIdsState';
-import { useSaveNavigationMenuItemsDraft } from '@/navigation-menu-item/edit/hooks/useSaveNavigationMenuItemsDraft';
 import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState';
 import { navigationMenuItemsSelector } from '@/navigation-menu-item/common/states/navigationMenuItemsSelector';
 import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/common/utils/filterWorkspaceNavigationMenuItems';
+import { useSaveNavigationMenuItemsDraft } from '@/navigation-menu-item/edit/hooks/useSaveNavigationMenuItemsDraft';
 import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
 import { useUpdatePageLayoutWithTabsAndWidgets } from '@/page-layout/hooks/useUpdatePageLayoutWithTabsAndWidgets';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
@@ -16,11 +16,12 @@ import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLa
 import { reInjectDynamicRelationWidgetsFromDraft } from '@/page-layout/utils/reInjectDynamicRelationWidgetsFromDraft';
 import { transformPageLayout } from '@/page-layout/utils/transformPageLayout';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useFeatureFlagsMap } from '@/workspace/hooks/useFeatureFlagsMap';
 import { useLingui } from '@lingui/react/macro';
 import { useStore } from 'jotai';
 import { useCallback, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { PageLayoutType } from '~/generated-metadata/graphql';
+import { FeatureFlagKey, PageLayoutType } from '~/generated-metadata/graphql';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { logError } from '~/utils/logError';
 
@@ -36,6 +37,10 @@ export const useSaveLayoutCustomization = () => {
   const { exitLayoutCustomizationMode } = useExitLayoutCustomizationMode();
   const { saveFieldsWidgetGroups } = useSaveFieldsWidgetGroups();
 
+  const featureFlags = useFeatureFlagsMap();
+  const isRecordPageLayoutEditingEnabled =
+    featureFlags[FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_EDITING_ENABLED];
+
   const save = useCallback(async () => {
     setIsSaving(true);
     try {
@@ -92,7 +97,10 @@ export const useSaveLayoutCustomization = () => {
         );
 
         if (isPageLayoutStructureDirty) {
-          const updateInput = convertPageLayoutDraftToUpdateInput(draft);
+          const updateInput = convertPageLayoutDraftToUpdateInput(draft, {
+            shouldFilterDynamicRelationWidgets:
+              !isRecordPageLayoutEditingEnabled,
+          });
           const result = await updatePageLayoutWithTabsAndWidgets(
             pageLayoutId,
             updateInput,
@@ -107,6 +115,7 @@ export const useSaveLayoutCustomization = () => {
                 transformPageLayout(updatedPageLayout);
 
               const pageLayoutToPersist =
+                !isRecordPageLayoutEditingEnabled &&
                 persistedLayout.type === PageLayoutType.RECORD_PAGE
                   ? reInjectDynamicRelationWidgetsFromDraft(
                       persistedLayout,
@@ -159,6 +168,7 @@ export const useSaveLayoutCustomization = () => {
     saveFieldsWidgetGroups,
     exitLayoutCustomizationMode,
     enqueueErrorSnackBar,
+    isRecordPageLayoutEditingEnabled,
     store,
     t,
   ]);

packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSection.tsx

@@ -15,19 +15,18 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useEnterLayoutCustomizationMode } from '@/layout-customization/hooks/useEnterLayoutCustomizationMode';
 import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
 import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/common/constants/FolderIconDefault';
-import { NavigationMenuItemType, SidePanelPages } from 'twenty-shared/types';
-import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel';
-import { useSortedNavigationMenuItems } from '@/navigation-menu-item/display/hooks/useSortedNavigationMenuItems';
+import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/common/states/openNavigationMenuItemFolderIdsState';
+import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
+import { preloadNavigationMenuItemDndKit } from '@/navigation-menu-item/display/dnd/preloadNavigationMenuItemDndKit';
 import {
   type NavigationMenuItemClickParams,
   useNavigationMenuItemSectionItems,
 } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
-import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/common/states/openNavigationMenuItemFolderIdsState';
-import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
+import { useSortedNavigationMenuItems } from '@/navigation-menu-item/display/hooks/useSortedNavigationMenuItems';
+import { WorkspaceSectionContainer } from '@/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionContainer';
 import { getNavigationMenuItemComputedLink } from '@/navigation-menu-item/display/utils/getNavigationMenuItemComputedLink';
 import { getNavigationMenuItemLabel } from '@/navigation-menu-item/display/utils/getNavigationMenuItemLabel';
-import { preloadNavigationMenuItemDndKit } from '@/navigation-menu-item/display/dnd/preloadNavigationMenuItemDndKit';
-import { WorkspaceSectionContainer } from '@/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionContainer';
+import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel';
 import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
@@ -35,6 +34,7 @@ import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { viewsSelector } from '@/views/states/selectors/viewsSelector';
+import { NavigationMenuItemType, SidePanelPages } from 'twenty-shared/types';
 
 const StyledRightIconsContainer = styled.div`
   align-items: center;
@@ -166,7 +166,7 @@ export const WorkspaceSection = () => {
     event?.stopPropagation();
     navigateSidePanel({
       page: SidePanelPages.NavigationMenuAddItem,
-      pageTitle: t`New sidebar item`,
+      pageTitle: t`New menu item`,
       pageIcon: IconColumnInsertRight,
       resetNavigationStack: true,
     });

packages/twenty-front/src/modules/navigation-menu-item/edit/components/WorkspaceSectionAddMenuItemButton.tsx

@@ -32,7 +32,7 @@ export const WorkspaceSectionAddMenuItemButton = () => {
     setSelectedNavigationMenuItemInEditMode(null);
     navigateSidePanel({
       page: SidePanelPages.NavigationMenuAddItem,
-      pageTitle: t`New sidebar item`,
+      pageTitle: t`New menu item`,
       pageIcon: IconColumnInsertRight,
       resetNavigationStack: true,
     });

packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useOpenAddItemToFolderPage.ts

@@ -34,7 +34,7 @@ export const useOpenAddItemToFolderPage = () => {
     });
     navigateSidePanel({
       page: SidePanelPages.NavigationMenuAddItem,
-      pageTitle: t`New sidebar item`,
+      pageTitle: t`New menu item`,
       pageIcon: IconColumnInsertRight,
       resetNavigationStack,
     });

packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditLinkItemView.tsx

@@ -5,14 +5,14 @@ import { ensureAbsoluteUrl } from 'twenty-shared/utils';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
 import { extractDomainFromUrl } from '@/navigation-menu-item/display/link/utils/extractDomainFromUrl';
-import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
-import { SidePanelList } from '@/side-panel/components/SidePanelList';
 import {
   type OrganizeActionsProps,
   SidePanelEditOrganizeActions,
 } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions';
 import { SidePanelEditOwnerSection } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOwnerSection';
 import { getOrganizeActionsSelectableItemIds } from '@/navigation-menu-item/edit/side-panel/utils/getOrganizeActionsSelectableItemIds';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
 import { TextInput } from '@/ui/input/components/TextInput';
 
 type SidePanelEditLinkItemViewProps = OrganizeActionsProps & {
@@ -93,7 +93,6 @@ export const SidePanelEditLinkItemView = ({
         onAddAfter={onAddAfter}
         showMoveToFolder
         onMoveToFolder={onOpenFolderPicker}
-        moveToFolderHasSubMenu
       />
       <SidePanelEditOwnerSection applicationId={selectedItem.applicationId} />
     </SidePanelList>

packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions.tsx

@@ -26,7 +26,6 @@ export type OrganizeActionsProps = {
 type SidePanelEditOrganizeActionsProps = OrganizeActionsProps & {
   showMoveToFolder?: boolean;
   onMoveToFolder?: () => void;
-  moveToFolderHasSubMenu?: boolean;
 };
 
 export const SidePanelEditOrganizeActions = ({
@@ -39,7 +38,6 @@ export const SidePanelEditOrganizeActions = ({
   onAddAfter,
   showMoveToFolder = false,
   onMoveToFolder,
-  moveToFolderHasSubMenu = false,
 }: SidePanelEditOrganizeActionsProps) => {
   const { t } = useLingui();
 
@@ -78,7 +76,7 @@ export const SidePanelEditOrganizeActions = ({
             Icon={IconFolderSymlink}
             label={t`Move to folder`}
             id={SidePanelNavigationItemActions.MOVE_TO_FOLDER}
-            hasSubMenu={moveToFolderHasSubMenu}
+            hasSubMenu
             onClick={onMoveToFolder}
           />
         </SelectableListItem>

packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts

@@ -2,15 +2,15 @@ import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { IconColumnInsertRight } from 'twenty-ui/display';
 
-import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
-import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
-import { type OrganizeActionsProps } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions';
-import { useNavigationMenuItemMoveRemove } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemMoveRemove';
-import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState';
-import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
 import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
 import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
 import { type AddMenuItemInsertionContext } from '@/navigation-menu-item/common/types/AddMenuItemInsertionContext';
+import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
+import { useNavigationMenuItemMoveRemove } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemMoveRemove';
+import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState';
+import { type OrganizeActionsProps } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { SidePanelPages } from 'twenty-shared/types';
@@ -119,7 +119,7 @@ export const useNavigationMenuItemEditOrganizeActions =
       setAddMenuItemInsertionContext(context);
       navigateSidePanel({
         page: SidePanelPages.NavigationMenuAddItem,
-        pageTitle: t`New sidebar item`,
+        pageTitle: t`New menu item`,
         pageIcon: IconColumnInsertRight,
         resetNavigationStack: true,
       });

packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowDiv.tsx

@@ -15,7 +15,7 @@ const StyledTr = styled.div<{
     div.table-cell,
     div.table-cell-0-0 {
       &:not(:first-of-type) {
-        background-color: ${themeCssVariables.background.tertiary};
+        background-color: ${themeCssVariables.accent.quaternary};
         border-bottom: 1px solid ${themeCssVariables.border.color.medium};
         border-color: ${themeCssVariables.border.color.medium};
       }

packages/twenty-front/src/modules/opportunities/types/Opportunity.ts

@@ -1,8 +0,0 @@
-export type Opportunity = {
-  __typename: 'Opportunity';
-  id: string;
-  createdAt: string;
-  updatedAt?: string;
-  deletedAt?: string | null;
-  name: string | null;
-};

packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx

@@ -7,7 +7,10 @@ import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageL
 import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
 import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
 import { useReorderPageLayoutWidgets } from '@/page-layout/hooks/useReorderPageLayoutWidgets';
+import { RecordPageAddWidgetSection } from '@/page-layout/widgets/components/RecordPageAddWidgetSection';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import {
+  FeatureFlagKey,
   PageLayoutTabLayoutMode,
   PageLayoutType,
 } from '~/generated-metadata/graphql';
@@ -28,6 +31,10 @@ export const PageLayoutContent = () => {
   const isRecordPageLayout =
     currentPageLayout.type === PageLayoutType.RECORD_PAGE;
 
+  const isRecordPageGlobalEditionEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_GLOBAL_EDITION_ENABLED,
+  );
+
   const isCanvasLayout = layoutMode === PageLayoutTabLayoutMode.CANVAS;
   const isVerticalList = layoutMode === PageLayoutTabLayoutMode.VERTICAL_LIST;
 
@@ -36,12 +43,19 @@ export const PageLayoutContent = () => {
   }
 
   if (isVerticalList) {
-    if (!isRecordPageLayout && isPageLayoutInEditMode) {
+    if (
+      isPageLayoutInEditMode &&
+      isRecordPageLayout &&
+      isRecordPageGlobalEditionEnabled
+    ) {
       return (
         <PageLayoutVerticalListEditor
           widgets={activeTab.widgets}
           onReorder={reorderWidgets}
           isReorderEnabled={true}
+          trailingElement={
+            isRecordPageLayout ? <RecordPageAddWidgetSection /> : undefined
+          }
         />
       );
     }

packages/twenty-front/src/modules/page-layout/components/PageLayoutInitializationQueryEffect.tsx

@@ -10,10 +10,11 @@ import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLa
 import { isPageLayoutEmpty } from '@/page-layout/utils/isPageLayoutEmpty';
 import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { useFeatureFlagsMap } from '@/workspace/hooks/useFeatureFlagsMap';
 import { useStore } from 'jotai';
 import { useCallback, useEffect } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { PageLayoutType } from '~/generated-metadata/graphql';
+import { FeatureFlagKey, PageLayoutType } from '~/generated-metadata/graphql';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 type PageLayoutInitializationQueryEffectProps = {
@@ -26,9 +27,17 @@ export const PageLayoutInitializationQueryEffect = ({
   const [pageLayoutIsInitialized, setPageLayoutIsInitialized] =
     useAtomComponentState(pageLayoutIsInitializedComponentState);
 
-  const basePageLayout = useBasePageLayout(pageLayoutId);
+  const featureFlags = useFeatureFlagsMap();
+  const isRecordPageLayoutEditingEnabled =
+    featureFlags[FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_EDITING_ENABLED];
 
-  const pageLayout = usePageLayoutWithRelationWidgets(basePageLayout);
+  const basePageLayout = useBasePageLayout(pageLayoutId);
+  const pageLayoutWithRelationWidgets =
+    usePageLayoutWithRelationWidgets(basePageLayout);
+
+  const pageLayout = isRecordPageLayoutEditingEnabled
+    ? basePageLayout
+    : pageLayoutWithRelationWidgets;
 
   const { setIsPageLayoutInEditMode } =
     useSetIsPageLayoutInEditMode(pageLayoutId);

packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx

@@ -7,8 +7,10 @@ import { PageLayoutComponentInstanceContext } from '@/page-layout/states/context
 import { getTabListInstanceIdFromPageLayoutAndRecord } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutAndRecord';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
+import { useFeatureFlagsMap } from '@/workspace/hooks/useFeatureFlagsMap';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 type PageLayoutRendererProps = {
   pageLayoutId: string;
@@ -19,6 +21,10 @@ export const PageLayoutRenderer = ({
 }: PageLayoutRendererProps) => {
   const { targetRecordIdentifier, layoutType } = useLayoutRenderingContext();
 
+  const featureFlags = useFeatureFlagsMap();
+  const isRecordPageLayoutEditingEnabled =
+    featureFlags[FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_EDITING_ENABLED];
+
   const tabListInstanceId = getTabListInstanceIdFromPageLayoutAndRecord({
     pageLayoutId,
     layoutType,
@@ -42,7 +48,9 @@ export const PageLayoutRenderer = ({
         >
           <PageLayoutInitializationQueryEffect pageLayoutId={pageLayoutId} />
           <PageLayoutRecordPageCustomizationSessionRegistrationEffect />
-          <PageLayoutRelationWidgetsSyncEffect pageLayoutId={pageLayoutId} />
+          {!isRecordPageLayoutEditingEnabled && (
+            <PageLayoutRelationWidgetsSyncEffect pageLayoutId={pageLayoutId} />
+          )}
           <PageLayoutRendererContent />
         </PageLayoutEditModeProvider>
       </TabListComponentInstanceContext.Provider>

packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx

@@ -6,16 +6,16 @@ import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer'
 import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
-import { styled } from '@linaria/react';
 import {
   DragDropContext,
   Draggable,
   Droppable,
   type DropResult,
 } from '@hello-pangea/dnd';
-import { useId } from 'react';
-import { useIsMobile } from 'twenty-ui/utilities';
+import { styled } from '@linaria/react';
+import { type ReactNode, useId } from 'react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useIsMobile } from 'twenty-ui/utilities';
 
 const StyledVerticalListContainer = styled.div<{
   variant: PageLayoutVerticalListViewerVariant;
@@ -47,12 +47,14 @@ type PageLayoutVerticalListEditorProps = {
   widgets: PageLayoutWidget[];
   onReorder: (result: DropResult) => void;
   isReorderEnabled?: boolean;
+  trailingElement?: ReactNode;
 };
 
 export const PageLayoutVerticalListEditor = ({
   widgets,
   onReorder,
   isReorderEnabled = true,
+  trailingElement,
 }: PageLayoutVerticalListEditorProps) => {
   const droppableId = `page-layout-vertical-list-${useId()}`;
 
@@ -112,6 +114,7 @@ export const PageLayoutVerticalListEditor = ({
               </Draggable>
             ))}
             {provided.placeholder}
+            {trailingElement}
           </StyledVerticalListContainer>
         )}
       </Droppable>

packages/twenty-front/src/modules/page-layout/graphql/fragments/pageLayoutWidgetFragment.ts

@@ -161,6 +161,8 @@ export const PAGE_LAYOUT_WIDGET_FRAGMENT = gql`
       }
       ... on FieldConfiguration {
         configurationType
+        fieldDisplayMode
+        fieldMetadataId
       }
       ... on FieldRichTextConfiguration {
         configurationType

packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldWidget.ts

@@ -0,0 +1,86 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useFieldListFieldMetadataItems } from '@/object-record/record-field-list/hooks/useFieldListFieldMetadataItems';
+import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutContentContext';
+import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { createDefaultFieldWidget } from '@/page-layout/utils/createDefaultFieldWidget';
+import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { WidgetConfigurationType } from '~/generated-metadata/graphql';
+
+export const useCreateRecordPageFieldWidget = () => {
+  const { tabId } = usePageLayoutContentContext();
+
+  const { targetObjectNameSingular } = useTargetRecord();
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: targetObjectNameSingular,
+  });
+
+  const { boxedRelationFieldMetadataItems } = useFieldListFieldMetadataItems({
+    objectNameSingular: targetObjectNameSingular,
+  });
+
+  const { currentPageLayout } = useCurrentPageLayoutOrThrow();
+
+  const pageLayoutDraftState = useAtomComponentStateCallbackState(
+    pageLayoutDraftComponentState,
+  );
+
+  const store = useStore();
+
+  const createRecordPageFieldWidget = useCallback(() => {
+    const activeTab = currentPageLayout.tabs.find((tab) => tab.id === tabId);
+    const existingWidgets = activeTab?.widgets ?? [];
+
+    const usedFieldMetadataIds = new Set(
+      existingWidgets
+        .filter(
+          (widget) =>
+            widget.configuration.configurationType ===
+            WidgetConfigurationType.FIELD,
+        )
+        .map((widget) => {
+          const configuration = widget.configuration as {
+            fieldMetadataId: string;
+          };
+          return configuration.fieldMetadataId;
+        }),
+    );
+
+    const availableRelationField = boxedRelationFieldMetadataItems.find(
+      (field) => !usedFieldMetadataIds.has(field.id),
+    );
+
+    const fieldMetadataId = availableRelationField?.id ?? '';
+
+    const positionIndex = existingWidgets.length;
+    const widgetId = uuidv4();
+
+    const newWidget = createDefaultFieldWidget({
+      id: widgetId,
+      pageLayoutTabId: tabId,
+      fieldMetadataId,
+      objectMetadataId: objectMetadataItem.id,
+      positionIndex,
+    });
+
+    store.set(pageLayoutDraftState, (prev) => ({
+      ...prev,
+      tabs: addWidgetToTab(prev.tabs, tabId, newWidget),
+    }));
+  }, [
+    boxedRelationFieldMetadataItems,
+    currentPageLayout.tabs,
+    objectMetadataItem.id,
+    pageLayoutDraftState,
+    store,
+    tabId,
+  ]);
+
+  return { createRecordPageFieldWidget };
+};

packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldsWidget.ts

@@ -0,0 +1,101 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutContentContext';
+import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { createDefaultFieldsWidget } from '@/page-layout/utils/createDefaultFieldsWidget';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
+import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { usePerformViewAPIPersist } from '@/views/hooks/internal/usePerformViewAPIPersist';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { SidePanelPages } from 'twenty-shared/types';
+import { v4 as uuidv4 } from 'uuid';
+import { ViewType } from '~/generated-metadata/graphql';
+
+export const useCreateRecordPageFieldsWidget = () => {
+  const { tabId } = usePageLayoutContentContext();
+
+  const { targetObjectNameSingular } = useTargetRecord();
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: targetObjectNameSingular,
+  });
+
+  const { currentPageLayout } = useCurrentPageLayoutOrThrow();
+
+  const { performViewAPICreate } = usePerformViewAPIPersist();
+
+  const pageLayoutDraftState = useAtomComponentStateCallbackState(
+    pageLayoutDraftComponentState,
+  );
+
+  const pageLayoutEditingWidgetIdState = useAtomComponentStateCallbackState(
+    pageLayoutEditingWidgetIdComponentState,
+  );
+
+  const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
+
+  const store = useStore();
+
+  const createRecordPageFieldsWidget = useCallback(async () => {
+    const viewId = uuidv4();
+
+    const result = await performViewAPICreate(
+      {
+        input: {
+          id: viewId,
+          name: `${objectMetadataItem.labelSingular} Fields`,
+          icon: 'IconList',
+          objectMetadataId: objectMetadataItem.id,
+          type: ViewType.FIELDS_WIDGET,
+        },
+      },
+      objectMetadataItem.id,
+    );
+
+    if (result.status === 'failed') {
+      return;
+    }
+
+    const activeTab = currentPageLayout.tabs.find((tab) => tab.id === tabId);
+    const positionIndex = activeTab?.widgets.length ?? 0;
+
+    const widgetId = uuidv4();
+
+    const newWidget = createDefaultFieldsWidget({
+      id: widgetId,
+      pageLayoutTabId: tabId,
+      viewId,
+      objectMetadataId: objectMetadataItem.id,
+      positionIndex,
+    });
+
+    store.set(pageLayoutDraftState, (prev) => ({
+      ...prev,
+      tabs: addWidgetToTab(prev.tabs, tabId, newWidget),
+    }));
+
+    store.set(pageLayoutEditingWidgetIdState, widgetId);
+
+    navigatePageLayoutSidePanel({
+      sidePanelPage: SidePanelPages.PageLayoutFieldsSettings,
+      focusTitleInput: true,
+      resetNavigationStack: true,
+    });
+  }, [
+    currentPageLayout.tabs,
+    navigatePageLayoutSidePanel,
+    objectMetadataItem.id,
+    objectMetadataItem.labelSingular,
+    pageLayoutDraftState,
+    pageLayoutEditingWidgetIdState,
+    performViewAPICreate,
+    store,
+    tabId,
+  ]);
+
+  return { createRecordPageFieldsWidget };
+};

packages/twenty-front/src/modules/page-layout/hooks/useNavigateToMoreWidgets.ts

@@ -0,0 +1,15 @@
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
+import { useCallback } from 'react';
+import { SidePanelPages } from 'twenty-shared/types';
+
+export const useNavigateToMoreWidgets = () => {
+  const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
+
+  const navigateToMoreWidgets = useCallback(() => {
+    navigatePageLayoutSidePanel({
+      sidePanelPage: SidePanelPages.PageLayoutWidgetTypeSelect,
+    });
+  }, [navigatePageLayoutSidePanel]);
+
+  return { navigateToMoreWidgets };
+};