584 Refactor Tabs (#11008)

Closes https://github.com/twentyhq/core-team-issues/issues/584

This PR:
- Migrates the component state `activeTabIdComponentState` from the
deprecated V1 version to V2.
- Allows the active tab state to be preserved during navigation inside
the side panel and reset when the side panel is closed.
- Allows the active tab state to be preserved when we open a record in
full page from the side panel


https://github.com/user-attachments/assets/f2329d7a-ea15-4bd8-81dc-e98ce11edbd0


https://github.com/user-attachments/assets/474bffd5-29e0-40ba-97f4-fa5e9be34dc2

packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx

@@ -10,7 +10,8 @@ import { RoleSettings } from '@/settings/roles/role-settings/components/RoleSett
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { TabList } from '@/ui/layout/tab/components/TabList';
-import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetRolesQuery } from '~/generated/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
@@ -33,9 +34,7 @@ export const SettingsRoleEdit = () => {
 
   const role = rolesData?.getRoles.find((r) => r.id === roleId);
 
-  const { activeTabId } = useTabList(
-    SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID,
-  );
+  const activeTabId = useRecoilComponentValueV2(activeTabIdComponentState);
 
   useEffect(() => {
     if (!rolesLoading && !role) {
@@ -101,9 +100,11 @@ export const SettingsRoleEdit = () => {
       {!rolesLoading && role ? (
         <SettingsPageContainer>
           <TabList
-            tabListInstanceId={SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID}
             tabs={tabs}
             className="tab-list"
+            componentInstanceId={
+              SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID
+            }
           />
           {renderActiveTabContent()}
         </SettingsPageContainer>