🔧 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/ui/layout/fullscreen/hooks/useShowFullscreen.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
-import { SettingsPath } from '@/types/SettingsPath';
 import { useLocation } from 'react-router-dom';
+import { SettingsPath } from 'twenty-shared/types';
 import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
 export const useShowFullscreen = () => {

packages/twenty-front/src/modules/ui/layout/hooks/__tests__/useShowAuthModal.test.tsx

@@ -2,8 +2,8 @@ import { renderHook } from '@testing-library/react';
 import * as reactRouterDom from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
-import { AppPath } from '@/types/AppPath';
 import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
+import { AppPath } from 'twenty-shared/types';
 import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
 jest.mock('react-router-dom', () => ({

packages/twenty-front/src/modules/ui/layout/hooks/useShowAuthModal.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
-import { AppPath } from '@/types/AppPath';
 import { useLocation } from 'react-router-dom';
+import { AppPath } from 'twenty-shared/types';
 import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
 export const useShowAuthModal = () => {

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

@@ -18,6 +18,8 @@ import { Global, css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import { Outlet, useLocation } from 'react-router-dom';
+import { SettingsPath } from 'twenty-shared/types';
+import { getSettingsPath } from 'twenty-shared/utils';
 import { useScreenSize } from 'twenty-ui/utilities';
 
 const StyledLayout = styled.div`
@@ -61,8 +63,10 @@ export const DefaultLayout = () => {
   const isSettingsPage = useIsSettingsPage();
   const location = useLocation();
   const isPageLayoutEditor =
-    location.pathname.includes('/settings/page-layout/new') ||
-    location.pathname.match(/\/settings\/page-layout\/[^/]+$/);
+    location.pathname.includes(getSettingsPath(SettingsPath.PageLayoutNew)) ||
+    location.pathname.match(
+      new RegExp(`${getSettingsPath(SettingsPath.PageLayout)}/[^/]+$`),
+    );
   const theme = useTheme();
   const windowsWidth = useScreenSize().width;
   const showAuthModal = useShowAuthModal();

packages/twenty-front/src/modules/ui/layout/tab-list/components/__stories__/Tablist.stories.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { type Meta, type StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import {
   IconCalendar,
   IconCheckbox,
@@ -11,6 +12,8 @@ import {
 } from 'twenty-ui/display';
 import { ComponentWithRouterDecorator } from 'twenty-ui/testing';
 import { TabList } from '../TabList';
+import { type TabListProps } from '../../types/TabListProps';
+import { type SingleTabProps } from '../../types/SingleTabProps';
 
 const tabs = [
   { id: 'general', title: 'General', logo: 'https://picsum.photos/200' },
@@ -80,3 +83,72 @@ export const Default: Story = {
     </StyledInteractiveContainer>
   ),
 };
+
+type TabListWithAddProps = Pick<
+  TabListProps,
+  'componentInstanceId' | 'loading' | 'isInRightDrawer' | 'className'
+> & {
+  initialTabs: SingleTabProps[];
+};
+
+const TabListWithAdd = ({
+  componentInstanceId,
+  loading,
+  isInRightDrawer,
+  className,
+  initialTabs,
+}: TabListWithAddProps) => {
+  const [currentTabs, setCurrentTabs] = useState<SingleTabProps[]>(initialTabs);
+  const [nextTabId, setNextTabId] = useState(initialTabs.length + 1);
+
+  const handleAddTab = () => {
+    const newTab: SingleTabProps = {
+      id: `new-tab-${nextTabId}`,
+      title: `New Tab ${nextTabId}`,
+      Icon: IconCheckbox,
+    };
+    setCurrentTabs([...currentTabs, newTab]);
+    setNextTabId(nextTabId + 1);
+  };
+
+  return (
+    <StyledInteractiveContainer>
+      <p>
+        <strong>Click the + button to add new tabs!</strong>
+      </p>
+      <TabList
+        tabs={currentTabs}
+        componentInstanceId={componentInstanceId}
+        loading={loading}
+        behaveAsLinks={false}
+        isInRightDrawer={isInRightDrawer}
+        className={className}
+        onAddTab={handleAddTab}
+      />
+    </StyledInteractiveContainer>
+  );
+};
+
+export const WithAddTab: Story = {
+  args: {
+    componentInstanceId: 'tabs-with-add',
+    tabs: tabs.slice(0, 3),
+  },
+  render: (args) => (
+    <TabListWithAdd
+      componentInstanceId={args.componentInstanceId}
+      loading={args.loading}
+      isInRightDrawer={args.isInRightDrawer}
+      className={args.className}
+      initialTabs={args.tabs}
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TabList with the ability to add new tabs dynamically using the onAddTab callback. Click the + button to add new tabs.',
+      },
+    },
+  },
+};

packages/twenty-front/src/modules/ui/layout/tab-list/utils/calculateVisibleTabCount.ts

@@ -2,6 +2,7 @@ import { TAB_LIST_GAP } from '@/ui/layout/tab-list/constants/TabListGap';
 import { TAB_LIST_LEFT_PADDING } from '@/ui/layout/tab-list/constants/TabListPadding';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { type TabWidthsById } from '@/ui/layout/tab-list/types/TabWidthsById';
+import { isDefined } from 'twenty-shared/utils';
 
 type CalculateVisibleTabCountParams = {
   visibleTabs: SingleTabProps[];
@@ -22,7 +23,6 @@ export const calculateVisibleTabCount = ({
     return visibleTabs.length;
   }
 
-  // Subtract add button width if present
   const availableWidth =
     containerWidth -
     TAB_LIST_LEFT_PADDING -
@@ -33,8 +33,7 @@ export const calculateVisibleTabCount = ({
     const tab = visibleTabs[i];
     const tabWidth = tabWidthsById[tab.id];
 
-    // Skip if width not measured yet
-    if (tabWidth === undefined) {
+    if (!isDefined(tabWidth)) {
       return visibleTabs.length;
     }
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx

@@ -6,8 +6,6 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { countAvailableWorkspaces } from '@/auth/utils/availableWorkspacesUtils';
 import { useBuildWorkspaceUrl } from '@/domain-manager/hooks/useBuildWorkspaceUrl';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
-import { AppPath } from '@/types/AppPath';
-import { SettingsPath } from '@/types/SettingsPath';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
@@ -23,6 +21,8 @@ import { type ApolloError } from '@apollo/client';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { AppPath, SettingsPath } from 'twenty-shared/types';
+import { getSettingsPath } from 'twenty-shared/utils';
 import {
   Avatar,
   IconDotsVertical,
@@ -42,7 +42,6 @@ import {
   useSignUpInNewWorkspaceMutation,
 } from '~/generated-metadata/graphql';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledDescription = styled.div`
   color: ${({ theme }) => theme.font.color.light};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -1,11 +1,11 @@
-import { expect, within } from '@storybook/test';
 import { type Meta, type StoryObj } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
-import { SettingsPath } from '@/types/SettingsPath';
+import { SettingsPath } from 'twenty-shared/types';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { PrefetchLoadedDecorator } from '~/testing/decorators/PrefetchLoadedDecorator';
@@ -17,6 +17,7 @@ import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockO
 import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
 import { NavigationDrawerFixedContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
+import { getSettingsPath } from 'twenty-shared/utils';
 import {
   IconAt,
   IconBell,
@@ -36,7 +37,7 @@ import {
 import { AdvancedSettingsToggle } from 'twenty-ui/navigation';
 import { getOsControlSymbol } from 'twenty-ui/utilities';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+
 import { NavigationDrawer } from '../NavigationDrawer';
 import { NavigationDrawerItem } from '../NavigationDrawerItem';
 import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup';