🔧 Restore PRs #14348 and #14352 that were reverted by PR #14347 (#14359)

## Problem

**CRITICAL:** Two PRs were accidentally reverted when PR #14347 "Prevent
csv export injections" was merged:

1. **PR #14348** "[Page Layout] - Review Refactor" - ✅ **RESTORED**
2. **PR #14352** "Fix wrong path used by backend" - ✅ **RESTORED**

## Root Cause Analysis

During the merge of PR #14347, there was a complex merge conflict with
PR #14352 "Fix wrong path used by backend". The merge commit
`324d7204bb` in the PR #14347 branch brought in changes from PR #14352,
but during the conflict resolution, **BOTH PR #14348 and PR #14352's
changes were accidentally overwritten**.

## What This PR Restores

This PR restores **BOTH** PRs by cherry-picking their commits:

### ✅ PR #14348 Changes Restored:
- `GraphWidgetRenderer.tsx` - was deleted, now restored
- `WidgetRenderer.tsx` - was missing, now restored  
- `SettingsPageLayoutTabsInstanceId.ts` - was deleted, now restored
- `useUpdatePageLayoutWidget.ts` - was renamed back, now restored with
correct name
- Multiple test files that were deleted
- Several hook files that were renamed/reverted
- File renames: `usePageLayoutWidgetUpdate.ts` →
`useUpdatePageLayoutWidget.ts`
- Hook refactoring and test file organization
- Page layout component improvements

### ✅ PR #14352 Changes Restored:
- **Types moved to twenty-shared:**
  - `packages/twenty-shared/src/types/AppBasePath.ts` ✅ RESTORED
  - `packages/twenty-shared/src/types/AppPath.ts` ✅ RESTORED
  - `packages/twenty-shared/src/types/SettingsPath.ts` ✅ RESTORED
- **Navigation utilities moved to twenty-shared:**
- `packages/twenty-shared/src/utils/navigation/getAppPath.ts` ✅ RESTORED
- `packages/twenty-shared/src/utils/navigation/getSettingsPath.ts` ✅
RESTORED
- **200+ import statements updated** across the codebase to use
twenty-shared
- **Old type files deleted** from twenty-front/src/modules/types/

## Evidence of Complete Restoration

**Before (reverted state):**
- ❌ Types were in `packages/twenty-front/src/modules/types/`
- ❌ Page layout files missing
- ❌ Hook files incorrectly named

**After (this PR):**
- ✅ Types correctly in `packages/twenty-shared/src/types/`
- ✅ All page layout files restored
- ✅ Hook files correctly named
- ✅ All import statements updated

## Verification

**Total changes:**
- PR #14348: 36 files changed, 863 insertions(+), 442 deletions(-)
- PR #14352: 243 files changed, 492 insertions(+), 461 deletions(-)
- **Combined: 279 files changed, 1355 insertions(+), 903 deletions(-)**

## Impact

This completely restores both PRs that were accidentally lost, ensuring:
1. Page layout refactoring work is back
2. Type organization and path utilities are correctly in twenty-shared
3. Backend email paths work correctly again
4. No functionality is lost

Fixes the reversion caused by the merge conflict in PR #14347.

---------

Co-authored-by: nitin <142569587+ehconitin@users.noreply.github.com>

packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx

@@ -8,12 +8,12 @@ import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState
 import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { SettingsPath } from '@/types/SettingsPath';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
+import { SettingsPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 
 const StyledCommandMenuContent = styled.div`

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx

@@ -20,6 +20,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { AppBasePath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronLeft, IconX } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
@@ -105,8 +106,8 @@ export const CommandMenuTopBar = () => {
 
   const location = useLocation();
   const isButtonVisible =
-    !location.pathname.startsWith('/objects/') &&
-    !location.pathname.startsWith('/object/');
+    !location.pathname.startsWith(`${AppBasePath.Root}objects/`) &&
+    !location.pathname.startsWith(`${AppBasePath.Root}object/`);
 
   const backButtonAnimationDuration =
     contextChips.length > 0 ? theme.animation.duration.instant : 0;

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx

@@ -10,10 +10,10 @@ import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadat
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
 import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId';
-import { AppPath } from '@/types/AppPath';
 import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
+import { AppPath } from 'twenty-shared/types';
 import { Avatar } from 'twenty-ui/display';
 import { useDebounce } from 'use-debounce';
 import { useSearchQuery } from '~/generated/graphql';

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx

@@ -1,7 +1,7 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { usePageLayoutWidgetCreate } from '@/settings/page-layout/hooks/usePageLayoutWidgetCreate';
+import { useCreatePageLayoutWidget } from '@/settings/page-layout/hooks/useCreatePageLayoutWidget';
 import {
-  GraphSubType,
+  GraphType,
   WidgetType,
 } from '@/settings/page-layout/mocks/mockWidgets';
 import styled from '@emotion/styled';
@@ -30,22 +30,22 @@ const StyledSectionTitle = styled.div`
 
 const graphTypeOptions = [
   {
-    type: GraphSubType.BAR,
+    type: GraphType.BAR,
     icon: IconChartBar,
     title: 'Bar Chart',
   },
   {
-    type: GraphSubType.PIE,
+    type: GraphType.PIE,
     icon: IconChartPie,
     title: 'Pie Chart',
   },
   {
-    type: GraphSubType.GAUGE,
+    type: GraphType.GAUGE,
     icon: IconGauge,
     title: 'Gauge',
   },
   {
-    type: GraphSubType.NUMBER,
+    type: GraphType.NUMBER,
     icon: IconNumber,
     title: 'Number',
   },
@@ -53,10 +53,10 @@ const graphTypeOptions = [
 
 export const CommandMenuPageLayoutGraphTypeSelect = () => {
   const { closeCommandMenu } = useCommandMenu();
-  const { handleCreateWidget } = usePageLayoutWidgetCreate();
+  const { createPageLayoutWidget } = useCreatePageLayoutWidget();
 
-  const handleSelectGraphType = (graphType: GraphSubType) => {
-    handleCreateWidget(WidgetType.GRAPH, graphType);
+  const handleSelectGraphType = (graphType: GraphType) => {
+    createPageLayoutWidget(WidgetType.GRAPH, graphType);
     closeCommandMenu();
   };
 

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeConfig.tsx

@@ -1,7 +1,7 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormTextFieldInput';
 import { useCreatePageLayoutIframeWidget } from '@/settings/page-layout/hooks/useCreatePageLayoutIframeWidget';
-import { usePageLayoutWidgetUpdate } from '@/settings/page-layout/hooks/usePageLayoutWidgetUpdate';
+import { useUpdatePageLayoutWidget } from '@/settings/page-layout/hooks/useUpdatePageLayoutWidget';
 import { pageLayoutDraftState } from '@/settings/page-layout/states/pageLayoutDraftState';
 import { pageLayoutEditingWidgetIdState } from '@/settings/page-layout/states/pageLayoutEditingWidgetIdState';
 import styled from '@emotion/styled';
@@ -34,7 +34,7 @@ const StyledButtonContainer = styled.div`
 export const CommandMenuPageLayoutIframeConfig = () => {
   const { closeCommandMenu } = useCommandMenu();
   const { createPageLayoutIframeWidget } = useCreatePageLayoutIframeWidget();
-  const { handleUpdateWidget } = usePageLayoutWidgetUpdate();
+  const { updatePageLayoutWidget } = useUpdatePageLayoutWidget();
   const [pageLayoutEditingWidgetId, setPageLayoutEditingWidgetId] =
     useRecoilState(pageLayoutEditingWidgetIdState);
   const pageLayoutDraft = useRecoilValue(pageLayoutDraftState);
@@ -77,7 +77,7 @@ export const CommandMenuPageLayoutIframeConfig = () => {
     }
 
     if (isEditMode && pageLayoutEditingWidgetId !== null) {
-      handleUpdateWidget(pageLayoutEditingWidgetId, {
+      updatePageLayoutWidget(pageLayoutEditingWidgetId, {
         title: title.trim(),
         configuration: {
           ...editingWidget?.configuration,