Implement object fields and settings new layout (#7979)

### Description

- This PR has as the base branch the TWNTY-5491 branch, but we also had
to include updates from the main branch, and currently, there are
conflicts in the TWNTY-5491, that cause errors on typescript in this PR,
so, we can update once the conflicts are resolved on the base branch,
but the functionality can be reviewed anyway
- We Implemented a new layout of object details settings and new, the
data is auto-saved in `Settings `tab of object detail
- There is no indication to the user that data are saved automatically
in the design, currently we are disabling the form

### Demo\

<https://www.loom.com/share/4198c0aa54b5450780a570ceee574838?sid=b4ef0a42-2d41-435f-9f5f-1b16816939f7>

### Refs

#TWNTY-5491

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
Co-authored-by: Weiko <corentin@twenty.com>

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

@@ -10,7 +10,7 @@ import { PageHeader } from './PageHeader';
 
 type SubMenuTopBarContainerProps = {
   children: JSX.Element | JSX.Element[];
-  title?: string;
+  title?: string | JSX.Element;
   actionButton?: ReactNode;
   className?: string;
   links: BreadcrumbProps['links'];

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

@@ -1,5 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { ReactElement } from 'react';
 import { IconComponent, Pill } from 'twenty-ui';
 
 type TabProps = {
@@ -10,7 +11,7 @@ type TabProps = {
   className?: string;
   onClick?: () => void;
   disabled?: boolean;
-  pill?: string;
+  pill?: string | ReactElement;
 };
 
 const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
@@ -73,7 +74,7 @@ export const Tab = ({
       <StyledHover>
         {Icon && <Icon size={theme.icon.size.md} />}
         {title}
-        {pill && <Pill label={pill} />}
+        {pill && typeof pill === 'string' ? <Pill label={pill} /> : pill}
       </StyledHover>
     </StyledTab>
   );

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -15,7 +15,7 @@ export type SingleTabProps = {
   id: string;
   hide?: boolean;
   disabled?: boolean;
-  pill?: string;
+  pill?: string | React.ReactElement;
 };
 
 type TabListProps = {