Admin panel refactor (#10119)

addressing > 
There are two patterns to avoid:
Creating functions that return JSX like renderThing() -> this was taken
already addressed in https://github.com/twentyhq/twenty/pull/10011
Making a hook that "stores" all the logic of a component - > this PR is
addressing this particular pattern
In essence, handlers should remain in the component and be connected to
their events.
And everything in a handler can be abstracted into its dedicated hook.
For example:
const { myReactiveState } =
useRecoilValue(myReactiveStateComponentState);
const { removeThingFromOtherThing } = useRemoveThingFromOtherThing();

const handleClick = () => {
  if (isDefined(myReactiveState)) {
    removeThingFromOtherThing();
  }
}

Broadly speaking, this is how you can split large components into
several sub-hooks.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlagState.ts

@@ -0,0 +1,36 @@
+import { userLookupResultState } from '@/settings/admin-panel/states/userLookupResultState';
+import { useRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared';
+import { FeatureFlagKey } from '~/generated/graphql';
+
+export const useFeatureFlagState = () => {
+  const [userLookupResult, setUserLookupResult] = useRecoilState(
+    userLookupResultState,
+  );
+
+  const updateFeatureFlagState = (
+    workspaceId: string,
+    featureFlag: FeatureFlagKey,
+    value: boolean,
+  ) => {
+    if (!isDefined(userLookupResult)) return;
+
+    setUserLookupResult({
+      ...userLookupResult,
+      workspaces: userLookupResult.workspaces.map((workspace) =>
+        workspace.id === workspaceId
+          ? {
+              ...workspace,
+              featureFlags: workspace.featureFlags.map((flag) =>
+                flag.key === featureFlag ? { ...flag, value } : flag,
+              ),
+            }
+          : workspace,
+      ),
+    });
+  };
+
+  return {
+    updateFeatureFlagState,
+  };
+};