Data settings new layout - anchor navigation

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

@@ -183,7 +183,7 @@ export const SettingsDataModelObjectAboutForm = ({
           defaultValue={objectMetadataItem?.labelSingular}
           render={({ field: { onChange, value } }) => (
             <TextInput
-              label={'Singular'}
+              label={'Label Singular'}
               placeholder={'Listing'}
               value={value}
               onChange={(value) => {

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@@ -49,6 +49,7 @@ const StyledTabListContainer = styled.div`
 
 const StyledContentContainer = styled.div`
   flex: 1;
+  overflow-y: auto;
   width: 100%;
   padding-left: 0;
 `;
@@ -68,8 +69,11 @@ const FIELDS_TAB_ID = 'fields';
 const SETTINGS_TAB_ID = 'settings';
 const INDEXES_TAB_ID = 'indexes';
 
+const validHashes = [FIELDS_TAB_ID, SETTINGS_TAB_ID, INDEXES_TAB_ID];
+
 export const SettingsObjectDetailPage = () => {
   const navigate = useNavigate();
+  const location = useLocation();
 
   const { objectSlug = '' } = useParams();
   const { findActiveObjectMetadataItemBySlug } =
@@ -83,13 +87,33 @@ export const SettingsObjectDetailPage = () => {
     findActiveObjectMetadataItemBySlug(updatedObjectSlug);
 
   const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
+  const { setActiveTabId } = useTabList(TAB_LIST_COMPONENT_ID);
   const activeTabId = useRecoilValue(activeTabIdState);
 
   const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
   const isUniqueIndexesEnabled = useIsFeatureEnabled(
     'IS_UNIQUE_INDEXES_ENABLED',
   );
 
+  const hash = location.hash.replace('#', '');
+
+  useEffect(() => {
+    if (!hash) {
+      const initialTabId = activeTabId ?? FIELDS_TAB_ID;
+      navigate(`${location.pathname}#${initialTabId}`, { replace: true });
+    }
+  }, [activeTabId, hash, location.pathname, navigate]);
+
+  useEffect(() => {
+    if (hash === activeTabId) return;
+
+    if (isDefined(activeTabId)) {
+      navigate(`${location.pathname}#${activeTabId}`, { replace: true });
+    } else if (validHashes.includes(hash)) {
+      setActiveTabId(hash);
+    }
+  }, [hash, activeTabId, navigate, location.pathname, setActiveTabId]);
+
   useEffect(() => {
     if (objectSlug === updatedObjectSlug) setUpdatedObjectSlug('');
     if (!isDefined(objectMetadataItem)) navigate(AppPath.NotFound);
@@ -142,12 +166,6 @@ export const SettingsObjectDetailPage = () => {
 
   return (
     <SubMenuTopBarContainer
-      title={
-        <StyledTitleContainer>
-          <H3Title title={objectMetadataItem.labelPlural} />
-          <StyledObjectTypeTag objectTypeLabel={objectTypeLabel} />
-        </StyledTitleContainer>
-      }
       links={[
         {
           children: 'Workspace',
@@ -173,6 +191,10 @@ export const SettingsObjectDetailPage = () => {
       }
     >
       <SettingsPageContainer>
+        <StyledTitleContainer>
+          <H3Title title={objectMetadataItem.labelPlural} />
+          <StyledObjectTypeTag objectTypeLabel={objectTypeLabel} />
+        </StyledTitleContainer>
         <StyledTabListContainer>
           <TabList
             tabListId={TAB_LIST_COMPONENT_ID}