Fix post merge revamp navigation bar (#6297)

Closes #6285 

@charlesBochet Also added some more utils for our component state v2.

packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useExtractedComponentFamilyStateV2.ts

@@ -0,0 +1,35 @@
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
+import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
+import { SerializableParam } from 'recoil';
+
+export const useExtractedComponentFamilyStateV2 = <
+  FamilyKey extends SerializableParam,
+  Value,
+>(
+  componentFamilyState: ComponentFamilyState<Value, FamilyKey>,
+  componentId?: string,
+) => {
+  const componentContext = (window as any).componentContextStateMap?.get(
+    componentFamilyState.key,
+  );
+
+  if (!componentContext) {
+    throw new Error(
+      `Component context for key "${componentFamilyState.key}" is not defined`,
+    );
+  }
+
+  const internalScopeId = useAvailableScopeIdOrThrow(
+    componentContext,
+    getScopeIdOrUndefinedFromComponentId(componentId),
+  );
+
+  const extractedComponentFamilyState = (familyKey: FamilyKey) =>
+    componentFamilyState.atomFamily({
+      scopeId: internalScopeId,
+      familyKey,
+    });
+
+  return extractedComponentFamilyState;
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue.ts

@@ -0,0 +1,36 @@
+import { SerializableParam, useRecoilValue } from 'recoil';
+
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
+import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
+
+export const useRecoilComponentFamilyValue = <
+  StateType,
+  FamilyKey extends SerializableParam,
+>(
+  componentFamilyState: ComponentFamilyState<StateType, FamilyKey>,
+  familyKey: FamilyKey,
+  componentId?: string,
+) => {
+  const componentContext = (window as any).componentContextStateMap?.get(
+    componentFamilyState.key,
+  );
+
+  if (!componentContext) {
+    throw new Error(
+      `Component context for key "${componentFamilyState.key}" is not defined`,
+    );
+  }
+
+  const internalComponentId = useAvailableScopeIdOrThrow(
+    componentContext,
+    getScopeIdOrUndefinedFromComponentId(componentId),
+  );
+
+  return useRecoilValue(
+    componentFamilyState.atomFamily({
+      scopeId: internalComponentId,
+      familyKey,
+    }),
+  );
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useScopeIdFromStateContext.ts

@@ -0,0 +1,23 @@
+import { useScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContext';
+import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
+
+export const useScopeIdFromStateContext = (
+  componentState: ComponentState<any> | ComponentFamilyState<any, any>,
+) => {
+  const componentContext = (window as any).componentContextStateMap?.get(
+    componentState.key,
+  );
+
+  if (!componentContext) {
+    throw new Error(
+      `Component context for key "${componentState.key}" is not defined`,
+    );
+  }
+
+  const scopeInternalContext = useScopeInternalContext(componentContext);
+
+  const scopeIdFromContext = scopeInternalContext?.scopeId;
+
+  return { scopeId: scopeIdFromContext };
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilyState.ts

@@ -0,0 +1,13 @@
+import { RecoilState, SerializableParam } from 'recoil';
+
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
+
+export type ComponentFamilyState<
+  StateType,
+  FamilyKey extends SerializableParam,
+> = {
+  key: string;
+  atomFamily: (
+    componentStateKey: ComponentFamilyStateKey<FamilyKey>,
+  ) => RecoilState<StateType>;
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyStateV2.ts

@@ -0,0 +1,39 @@
+import { AtomEffect, atomFamily, SerializableParam } from 'recoil';
+
+import { ScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopeInternalContext';
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
+import { isDefined } from 'twenty-ui';
+
+type CreateComponentFamilyStateV2Type<ValueType> = {
+  key: string;
+  defaultValue: ValueType;
+  componentContext: ScopeInternalContext<any> | null;
+  effects?: AtomEffect<ValueType>[];
+};
+
+export const createComponentFamilyStateV2 = <
+  ValueType,
+  FamilyKey extends SerializableParam,
+>({
+  key,
+  effects,
+  defaultValue,
+  componentContext,
+}: CreateComponentFamilyStateV2Type<ValueType>) => {
+  if (isDefined(componentContext)) {
+    if (!isDefined((window as any).componentContextStateMap)) {
+      (window as any).componentContextStateMap = new Map();
+    }
+
+    (window as any).componentContextStateMap.set(key, componentContext);
+  }
+
+  return {
+    key,
+    atomFamily: atomFamily<ValueType, ComponentFamilyStateKey<FamilyKey>>({
+      key,
+      default: defaultValue,
+      effects,
+    }),
+  };
+};