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/hooks/internal/useTabListStates.ts

@@ -0,0 +1,20 @@
+import { TabListScopeInternalContext } from '@/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext';
+import { activeTabIdStateScopeMap } from '@/ui/layout/tab/states/activeTabIdStateScopeMap';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getState } from '@/ui/utilities/recoil-scope/utils/getState';
+
+type useTabListStatesProps = {
+  tabListScopeId?: string;
+};
+
+export const useTabListStates = ({ tabListScopeId }: useTabListStatesProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    TabListScopeInternalContext,
+    tabListScopeId,
+  );
+
+  return {
+    scopeId,
+    activeTabIdState: getState(activeTabIdStateScopeMap, scopeId),
+  };
+};

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

@@ -0,0 +1,15 @@
+import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
+import { useSetRecoilState } from 'recoil';
+
+export const useTabList = (tabListId?: string) => {
+  const { activeTabIdState } = useTabListStates({
+    tabListScopeId: `${tabListId}-scope`,
+  });
+
+  const setActiveTabId = useSetRecoilState(activeTabIdState);
+
+  return {
+    activeTabIdState,
+    setActiveTabId,
+  };
+};