Migrate twenty ui to jotai (#17900)

## Remove Recoil from twenty-ui

Completely removes the `recoil` dependency from `twenty-ui` by
converting all atoms, hooks, and providers to Jotai equivalents.

### twenty-ui
- `createState` now returns a Jotai `PrimitiveAtom` instead of a Recoil
atom
- `iconsState`, `IconsProvider`, `useIcons` converted to Jotai
(`useSetAtom`, `useAtomValue`)
- `RecoilRootDecorator` now uses Jotai `Provider` (name kept for compat)
- Deleted unused `invalidAvatarUrlsState` (Avatar already uses
`invalidAvatarUrlsAtomV2`)
- Removed `recoil` from `package.json`

### twenty-front
- Created local Recoil `createState` at
`@/ui/utilities/state/utils/createState` for ~112 state files still on
Recoil
- Updated all imports accordingly
- Removed `iconsState` from Recoil snapshot preservation in `useAuth`
(lives in Jotai store now)

packages/twenty-front/src/localization/states/dateLocaleState.ts

@@ -1,7 +1,7 @@
 import { type Locale } from 'date-fns';
 import { enUS } from 'date-fns/locale';
 import { type APP_LOCALES } from 'twenty-shared/translations';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 type DateLocaleState = {
   locale?: keyof typeof APP_LOCALES;

packages/twenty-front/src/modules/action-menu/actions/states/forceRegisteredActionsMapComponentState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const forceRegisteredActionsByKeyState = createState<
   Record<string, boolean | undefined>

packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const emailThreadIdWhenEmailThreadWasClosedState = createState<
   string | null
 >({

packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts

@@ -1,5 +1,5 @@
 import { type ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const activityTargetableEntityArrayState = createState<
   ActivityTargetableObject[]

packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const canCreateActivityState = createState<boolean>({
   key: 'canCreateActivityState',
   defaultValue: false,

packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isActivityInCreateModeState = createState<boolean>({
   key: 'isActivityInCreateModeState',
   defaultValue: false,

packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isUpsertingActivityInDBState = createState<boolean>({
   key: 'isUpsertingActivityInDBState',
   defaultValue: false,

packages/twenty-front/src/modules/app/states/isAppEffectRedirectEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isAppEffectRedirectEnabledState = createState<boolean>({
   key: 'isAppEffectRedirectEnabledState',
   defaultValue: true,

packages/twenty-front/src/modules/app/states/verifyEmailRedirectPathState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const verifyEmailRedirectPathState = createState<string | undefined>({
   key: 'verifyEmailRedirectPathState',

packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx

@@ -20,7 +20,6 @@ import {
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { SnackBarComponentInstanceContext } from '@/ui/feedback/snack-bar-manager/contexts/SnackBarComponentInstanceContext';
 import { renderHook } from '@testing-library/react';
-import { iconsState } from 'twenty-ui/display';
 import { SupportDriver } from '~/generated-metadata/graphql';
 
 const redirectSpy = jest.fn();
@@ -159,7 +158,6 @@ describe('useAuth', () => {
     const { result } = renderHook(
       () => {
         const client = useApolloClient();
-        const icons = useRecoilValue(iconsState);
         const workspaceAuthProviders = useRecoilValue(
           workspaceAuthProvidersState,
         );
@@ -175,7 +173,6 @@ describe('useAuth', () => {
           ...useAuth(),
           client,
           state: {
-            icons,
             workspaceAuthProviders,
             billing,
             isDeveloperDefaultSignInPrefilled,
@@ -200,7 +197,6 @@ describe('useAuth', () => {
 
     const { state } = result.current;
 
-    expect(state.icons).toEqual({});
     expect(state.workspaceAuthProviders).toEqual(null);
     expect(state.billing).toBeNull();
     expect(state.isDeveloperDefaultSignInPrefilled).toBe(false);

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -67,7 +67,6 @@ import { i18n } from '@lingui/core';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { SOURCE_LOCALE } from 'twenty-shared/translations';
 import { isDefined } from 'twenty-shared/utils';
-import { iconsState } from 'twenty-ui/display';
 import { cookieStorage } from '~/utils/cookie-storage';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 
@@ -132,7 +131,6 @@ export const useAuth = () => {
 
         const emptySnapshot = snapshot_UNSTABLE();
 
-        const iconsValue = snapshot.getLoadable(iconsState).getValue();
         const authProvidersValue = snapshot
           .getLoadable(workspaceAuthProvidersState)
           .getValue();
@@ -164,7 +162,6 @@ export const useAuth = () => {
           .getValue();
 
         const initialSnapshot = emptySnapshot.map(({ set }) => {
-          set(iconsState, iconsValue);
           set(workspaceAuthProvidersState, authProvidersValue);
           set(billingState, billing);
           set(

packages/twenty-front/src/modules/auth/states/availableWorkspacesState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type AvailableWorkspaces } from '~/generated-metadata/graphql';
 
 export const availableWorkspacesState = createState<AvailableWorkspaces>({

packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts

@@ -1,6 +1,6 @@
 import { type BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
   key: 'billingCheckoutSessionState',

packages/twenty-front/src/modules/auth/states/currentUserState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type User } from '~/generated-metadata/graphql';
 
 export type CurrentUser = Pick<

packages/twenty-front/src/modules/auth/states/currentUserWorkspaceState.ts

@@ -1,5 +1,5 @@
 import { type ObjectPermissions } from 'twenty-shared/types';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type UserWorkspace } from '~/generated-metadata/graphql';
 
 export type CurrentUserWorkspace = Pick<

packages/twenty-front/src/modules/auth/states/currentWorkspaceDeletedMembersState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type DeletedWorkspaceMember } from '~/generated-metadata/graphql';
 
 export const currentWorkspaceDeletedMembersState = createState<

packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts

@@ -1,5 +1,5 @@
 import { type WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export type CurrentWorkspaceMember = Omit<
   WorkspaceMember,

packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersState.ts

@@ -1,5 +1,5 @@
 import { type PartialWorkspaceMember } from '@/settings/roles/types/RoleWithPartialMembers';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const currentWorkspaceMembersState = createState<
   PartialWorkspaceMember[]

packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import {
   type Application,
   type Role,

packages/twenty-front/src/modules/auth/states/isCurrentUserLoadedState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isCurrentUserLoadedState = createState<boolean>({
   key: 'isCurrentUserLoadedState',
   defaultValue: false,

packages/twenty-front/src/modules/auth/states/loginTokenState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type AuthToken } from '~/generated-metadata/graphql';
 
 export const loginTokenState = createState<AuthToken['token'] | null>({

packages/twenty-front/src/modules/auth/states/previousUrlState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const previousUrlState = createState<string>({
   key: 'previousUrlState',
   defaultValue: '',

packages/twenty-front/src/modules/auth/states/qrCode.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const qrCodeState = createState<string | null>({
   key: 'qrCodeState',

packages/twenty-front/src/modules/auth/states/signInUpModeState.ts

@@ -1,5 +1,5 @@
 import { SignInUpMode } from '@/auth/types/signInUpMode';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const signInUpModeState = createState<SignInUpMode>({
   key: 'signInUpModeState',

packages/twenty-front/src/modules/auth/states/signInUpStepState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export enum SignInUpStep {
   Init = 'init',
   Email = 'email',

packages/twenty-front/src/modules/auth/states/tokenPairState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type AuthTokenPair } from '~/generated-metadata/graphql';
 import { cookieStorageEffect } from '~/utils/recoil/cookieStorageEffect';
 

packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts

@@ -1,5 +1,5 @@
 import { type PublicWorkspaceDataOutput } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const workspacePublicDataState =
   createState<PublicWorkspaceDataOutput | null>({

packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const captchaTokenState = createState<string | undefined>({
   key: 'captchaTokenState',
   defaultValue: undefined,

packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isCaptchaScriptLoadedState = createState<boolean>({
   key: 'isCaptchaScriptLoadedState',
   defaultValue: false,

packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isRequestingCaptchaTokenState = createState<boolean>({
   key: 'isRequestingCaptchaTokenState',
   defaultValue: false,

packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isLoadingTokensFromExtensionState = createState<boolean | null>({
   key: 'isLoadingTokensFromExtensionState',
   defaultValue: null,

packages/twenty-front/src/modules/client-config/states/aiModelsState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type ClientAiModelConfig } from '~/generated-metadata/graphql';
 
 export const aiModelsState = createState<ClientAiModelConfig[]>({

packages/twenty-front/src/modules/client-config/states/allowRequestsToTwentyIcons.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const allowRequestsToTwentyIconsState = createState<boolean>({
   key: 'allowRequestsToTwentyIcons',

packages/twenty-front/src/modules/client-config/states/apiConfigState.ts

@@ -1,5 +1,5 @@
 import { type ApiConfig } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const apiConfigState = createState<ApiConfig | null>({
   key: 'apiConfigState',

packages/twenty-front/src/modules/client-config/states/appVersionState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const appVersionState = createState<string | undefined>({
   key: 'appVersion',

packages/twenty-front/src/modules/client-config/states/authProvidersState.ts

@@ -1,5 +1,5 @@
 import { type AuthProviders } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const authProvidersState = createState<AuthProviders>({
   key: 'authProvidersState',

packages/twenty-front/src/modules/client-config/states/billingState.ts

@@ -1,5 +1,5 @@
 import { type Billing } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const billingState = createState<Billing | null>({
   key: 'billingState',

packages/twenty-front/src/modules/client-config/states/calendarBookingPageIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const calendarBookingPageIdState = createState<string | null>({
   key: 'calendarBookingPageIdState',

packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const canManageFeatureFlagsState = createState<boolean>({
   key: 'canManageFeatureFlagsState',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/captchaState.ts

@@ -1,5 +1,5 @@
 import { type Captcha } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const captchaState = createState<Captcha | null>({
   key: 'captchaState',

packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const chromeExtensionIdState = createState<string | null | undefined>({
   key: 'chromeExtensionIdState',
   defaultValue: null,

packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts

@@ -1,5 +1,5 @@
 import { type ClientConfig } from '@/client-config/types/ClientConfig';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 type ClientConfigApiStatus = {
   isLoadedOnce: boolean;

packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isAnalyticsEnabledState = createState<boolean>({
   key: 'isAnalyticsEnabled',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/isAttachmentPreviewEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isAttachmentPreviewEnabledState = createState<boolean>({
   key: 'isAttachmentPreviewEnabled',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/isClickHouseConfiguredState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const isClickHouseConfiguredState = createState<boolean>({
   key: 'isClickHouseConfigured',

packages/twenty-front/src/modules/client-config/states/isCloudflareIntegrationEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const isCloudflareIntegrationEnabledState = createState<boolean>({
   key: 'isCloudflareIntegrationEnabled',

packages/twenty-front/src/modules/client-config/states/isConfigVariablesInDbEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isConfigVariablesInDbEnabledState = createState<boolean>({
   key: 'isConfigVariablesInDbEnabled',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isDeveloperDefaultSignInPrefilledState = createState<boolean>({
   key: 'isDeveloperDefaultSignInPrefilledState',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isEmailVerificationRequiredState = createState<boolean>({
   key: 'isEmailVerificationRequired',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/isEmailingDomainsEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const isEmailingDomainsEnabledState = createState<boolean>({
   key: 'isEmailingDomainsEnabled',

packages/twenty-front/src/modules/client-config/states/isGoogleCalendarEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isGoogleCalendarEnabledState = createState<boolean>({
   key: 'isGoogleCalendarEnabled',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/isGoogleMessagingEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isGoogleMessagingEnabledState = createState<boolean>({
   key: 'isGoogleMessagingEnabled',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/isImapSmtpCaldavEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const isImapSmtpCaldavEnabledState = createState<boolean>({
   key: 'isImapSmtpCaldavEnabled',

packages/twenty-front/src/modules/client-config/states/isMicrosoftCalendarEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isMicrosoftCalendarEnabledState = createState<boolean>({
   key: 'isMicrosoftCalendarEnabled',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/isMicrosoftMessagingEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isMicrosoftMessagingEnabledState = createState<boolean>({
   key: 'isMicrosoftMessagingEnabled',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isMultiWorkspaceEnabledState = createState<boolean>({
   key: 'isMultiWorkspaceEnabled',
   defaultValue: false,

packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts

@@ -1,5 +1,5 @@
 import { type Sentry } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const sentryConfigState = createState<Sentry | null>({
   key: 'sentryConfigState',

packages/twenty-front/src/modules/client-config/states/supportChatState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type Support, SupportDriver } from '~/generated-metadata/graphql';
 
 export const supportChatState = createState<Support>({

packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsByPageState.ts

@@ -1,5 +1,5 @@
 import { type MorphItem } from '@/object-record/multiple-objects/types/MorphItem';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const commandMenuNavigationMorphItemsByPageState = createState<
   Map<string, MorphItem[]>

packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationStackState.ts

@@ -1,6 +1,6 @@
 import { type CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { type IconComponent } from 'twenty-ui/display';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export type CommandMenuNavigationStackItem = {
   page: CommandMenuPages;

packages/twenty-front/src/modules/command-menu/states/commandMenuPageInfoState.ts

@@ -1,5 +1,5 @@
 import { type IconComponent } from 'twenty-ui/display';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const commandMenuPageInfoState = createState<{
   title?: string;

packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts

@@ -1,5 +1,5 @@
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const commandMenuPageState = createState<CommandMenuPages>({
   key: 'command-menu/commandMenuPageState',

packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const commandMenuSearchState = createState<string>({
   key: 'command-menu/commandMenuSearchState',
   defaultValue: '',

packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const hasUserSelectedCommandState = createState({
   key: 'hasUserSelectedCommandState',
   defaultValue: false,

packages/twenty-front/src/modules/command-menu/states/isCommandMenuClosingState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isCommandMenuClosingState = createState({
   key: 'command-menu/isCommandMenuClosingState',
   defaultValue: false,

packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts

@@ -1,5 +1,5 @@
 import { type ClientConfig } from '@/client-config/types/ClientConfig';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const domainConfigurationState = createState<
   Pick<ClientConfig, 'frontDomain' | 'defaultSubdomain'>

packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts

@@ -1,5 +1,5 @@
 import { cookieStorageEffect } from '~/utils/recoil/cookieStorageEffect';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const lastAuthenticatedWorkspaceDomainState = createState<
   | {

packages/twenty-front/src/modules/localization/states/workspaceMemberFormatPreferencesState.ts

@@ -7,7 +7,7 @@ import { detectNumberFormat } from '@/localization/utils/detection/detectNumberF
 import { detectTimeFormat } from '@/localization/utils/detection/detectTimeFormat';
 import { detectTimeZone } from '@/localization/utils/detection/detectTimeZone';
 import { CalendarStartDay } from 'twenty-shared/constants';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export type WorkspaceMemberFormatPreferences = {
   timeZone: string;

packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const currentMobileNavigationDrawerState = createState<
   'main' | 'settings'
 >({

packages/twenty-front/src/modules/navigation/states/lastVisitedObjectMetadataItemIdState.ts

@@ -1,5 +1,5 @@
 import { localStorageEffect } from '~/utils/recoil/localStorageEffect';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const lastVisitedObjectMetadataItemIdState = createState<string | null>({
   key: 'lastVisitedObjectMetadataItemIdState',

packages/twenty-front/src/modules/navigation/states/lastVisitedViewPerObjectMetadataItemState.ts

@@ -1,5 +1,5 @@
 import { localStorageEffect } from '~/utils/recoil/localStorageEffect';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const lastVisitedViewPerObjectMetadataItemState = createState<Record<
   string,

packages/twenty-front/src/modules/object-metadata/states/lastFieldMetadataItemUpdateState.ts

@@ -1,5 +1,5 @@
 import type { FieldMetadataItemUpdate } from '@/object-metadata/types/FieldMetadataItemUpdate';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const lastFieldMetadataItemUpdateState =
   createState<FieldMetadataItemUpdate | null>({

packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts

@@ -1,5 +1,5 @@
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const objectMetadataItemsState = createState<ObjectMetadataItem[]>({
   key: 'objectMetadataItemsState',

packages/twenty-front/src/modules/object-metadata/states/shouldAppBeLoadingState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const shouldAppBeLoadingState = createState<boolean>({
   key: 'shouldAppBeLoadingState',
   defaultValue: false,

packages/twenty-front/src/modules/object-record/record-field/ui/states/lastShowPageRecordId.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const lastShowPageRecordIdState = createState<string | null>({
   key: 'lastShowPageRecordIdState',

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexCalendarFieldMetadataIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const recordIndexCalendarFieldMetadataIdState = createState<
   string | null

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexCalendarLayoutState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { ViewCalendarLayout } from '~/generated-metadata/graphql';
 
 export const recordIndexCalendarLayoutState = createState<ViewCalendarLayout>({

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts

@@ -1,6 +1,6 @@
 import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const recordIndexFieldDefinitionsState = createState<
   ColumnDefinition<FieldMetadata>[]

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexOpenRecordInState.ts

@@ -1,5 +1,5 @@
 import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const recordIndexOpenRecordInState = createState<ViewOpenRecordInType>({
   key: 'recordIndexOpenRecordInState',

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts

@@ -1,5 +1,5 @@
 import { type ViewType } from '@/views/types/ViewType';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const recordIndexViewTypeState = createState<ViewType | undefined>({
   key: 'recordIndexViewTypeState',

packages/twenty-front/src/modules/object-record/record-merge/states/mergeInProgressState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const isMergeInProgressState = createState<boolean>({
   key: 'isMergeInProgress',

packages/twenty-front/src/modules/object-record/record-merge/states/mergeSettingsState.ts

@@ -1,5 +1,5 @@
 import { type MergeManySettings } from '@/object-record/hooks/useMergeManyRecords';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const mergeSettingsState = createState<MergeManySettings>({
   key: 'mergeSettingsState',

packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const viewableRecordIdState = createState<string | null>({
   key: 'activities/viewable-record-id',

packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 // TODO: deprecate this state once we remove IS_COMMAND_MENU_V2_ENABLED flag
 export const viewableRecordNameSingularState = createState<string | null>({
   key: 'activities/viewable-record-name-singular',

packages/twenty-front/src/modules/object-record/record-table/states/tableWidthResizeIsActivedState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const tableWidthResizeIsActiveState = createState({
   key: 'tableWidthResizeIsActiveState',

packages/twenty-front/src/modules/page-layout/states/currentPageLayoutIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const currentPageLayoutIdState = createState<string | null>({
   key: 'currentPageLayoutIdState',

packages/twenty-front/src/modules/page-layout/states/recordPageLayoutsState.ts

@@ -1,5 +1,5 @@
 import { type PageLayout } from '@/page-layout/types/PageLayout';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const recordPageLayoutsState = createState<PageLayout[]>({
   key: 'recordPageLayoutsState',

packages/twenty-front/src/modules/prefetch/states/prefetchFavoriteFoldersState.ts

@@ -1,5 +1,5 @@
 import { type FavoriteFolder } from '@/favorites/types/FavoriteFolder';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const prefetchFavoriteFoldersState = createState<FavoriteFolder[]>({
   key: 'prefetchFavoriteFoldersState',

packages/twenty-front/src/modules/prefetch/states/prefetchFavoritesState.ts

@@ -1,5 +1,5 @@
 import { type Favorite } from '@/favorites/types/Favorite';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const prefetchFavoritesState = createState<Favorite[]>({
   key: 'prefetchFavoritesState',

packages/twenty-front/src/modules/prefetch/states/prefetchNavigationMenuItemsState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
 export const prefetchNavigationMenuItemsState = createState<

packages/twenty-front/src/modules/settings/admin-panel/config-variables/states/configVariableGroupFilterState.ts

@@ -1,5 +1,5 @@
 import { type ConfigVariableGroupFilter } from '@/settings/admin-panel/config-variables/types/ConfigVariableGroupFilter';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const configVariableGroupFilterState =
   createState<ConfigVariableGroupFilter>({

packages/twenty-front/src/modules/settings/admin-panel/config-variables/states/configVariableSourceFilterState.ts

@@ -1,5 +1,5 @@
 import { type ConfigVariableSourceFilter } from '@/settings/admin-panel/config-variables/types/ConfigVariableSourceFilter';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const configVariableSourceFilterState =
   createState<ConfigVariableSourceFilter>({

packages/twenty-front/src/modules/settings/admin-panel/config-variables/states/showHiddenGroupVariablesState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const showHiddenGroupVariablesState = createState<boolean>({
   key: 'showHiddenGroupVariablesState',

packages/twenty-front/src/modules/settings/domains/states/customDomainRecordsState.ts

@@ -1,5 +1,5 @@
 import { type DomainValidRecords } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const customDomainRecordsState = createState<{
   customDomainRecords: DomainValidRecords | null;

packages/twenty-front/src/modules/settings/domains/states/publicDomainRecordsState.ts

@@ -1,5 +1,5 @@
 import { type DomainValidRecords } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const publicDomainRecordsState = createState<{
   publicDomainRecords: DomainValidRecords | null;

packages/twenty-front/src/modules/settings/domains/states/selectedPublicDomainState.ts

@@ -1,5 +1,5 @@
 import { type PublicDomain } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const selectedPublicDomainState = createState<PublicDomain | undefined>({
   key: 'selectedPublicDomainState',

packages/twenty-front/src/modules/settings/logic-functions/states/logicFunctionsState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type FindManyLogicFunctionsQuery } from '~/generated-metadata/graphql';
 
 export type LogicFunction =

packages/twenty-front/src/modules/settings/playground/states/openAPIReference.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const openAPIReferenceState = createState<any>({
   key: 'OpenAPIReference',
   defaultValue: null,

packages/twenty-front/src/modules/settings/security/states/ApprovedAccessDomainsState.ts

@@ -1,5 +1,5 @@
 import { type ApprovedAccessDomain } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const approvedAccessDomainsState = createState<
   Omit<ApprovedAccessDomain, '__typename'>[]

packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts

@@ -1,7 +1,7 @@
 /* @license Enterprise */
 
 import { type SSOIdentityProvider } from '@/settings/security/types/SSOIdentityProvider';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const SSOIdentitiesProvidersState = createState<
   Omit<SSOIdentityProvider, '__typename'>[]