Migrate tab list to scope map (#3333)

* Migrate tab list to scope map

* Return state to hook and let client subscribe to state

* Run prettier

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

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

@@ -2,11 +2,11 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-
-import { activeTabIdScopedState } from '../states/activeTabIdScopedState';
 
 import { Tab } from './Tab';
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
+import { useRecoilValue } from 'recoil';
 
 type SingleTabProps = {
   title: string;
@@ -17,8 +17,8 @@ type SingleTabProps = {
 };
 
 type TabListProps = {
+  tabListId: string;
   tabs: SingleTabProps[];
-  context: React.Context<string | null>;
 };
 
 const StyledContainer = styled.div`
@@ -31,35 +31,36 @@ const StyledContainer = styled.div`
   user-select: none;
 `;
 
-export const TabList = ({ tabs, context }: TabListProps) => {
+export const TabList = ({ tabs, tabListId }: TabListProps) => {
   const initialActiveTabId = tabs[0].id;
 
-  const [activeTabId, setActiveTabId] = useRecoilScopedState(
-    activeTabIdScopedState,
-    context,
-  );
+  const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
+
+  const activeTabId = useRecoilValue(activeTabIdState);
 
   React.useEffect(() => {
     setActiveTabId(initialActiveTabId);
   }, [initialActiveTabId, setActiveTabId]);
 
   return (
-    <StyledContainer>
-      {tabs
-        .filter((tab) => !tab.hide)
-        .map((tab) => (
-          <Tab
-            id={tab.id}
-            key={tab.id}
-            title={tab.title}
-            Icon={tab.Icon}
-            active={tab.id === activeTabId}
-            onClick={() => {
-              setActiveTabId(tab.id);
-            }}
-            disabled={tab.disabled}
-          />
-        ))}
-    </StyledContainer>
+    <TabListScope tabListScopeId={tabListId}>
+      <StyledContainer>
+        {tabs
+          .filter((tab) => !tab.hide)
+          .map((tab) => (
+            <Tab
+              id={tab.id}
+              key={tab.id}
+              title={tab.title}
+              Icon={tab.Icon}
+              active={tab.id === activeTabId}
+              onClick={() => {
+                setActiveTabId(tab.id);
+              }}
+              disabled={tab.disabled}
+            />
+          ))}
+      </StyledContainer>
+    </TabListScope>
   );
 };

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

@@ -40,6 +40,7 @@ const meta: Meta<typeof TabList> = {
   title: 'UI/Layout/Tab/TabList',
   component: TabList,
   args: {
+    tabListId: 'tab-list-id',
     tabs: tabs,
   },
   decorators: [