Migrate more to Jotai (#18087)

Continue jotai migration

packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 
 import { useSystemColorScheme } from '@/ui/theme/hooks/useSystemColorScheme';
 import { persistedColorSchemeState } from '@/ui/theme/states/persistedColorSchemeState';
-import { useRecoilState } from 'recoil';
+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 import { type ColorScheme } from 'twenty-ui/input';
 import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme';
 
@@ -16,7 +16,7 @@ export const ThemeSchemeContext = createContext<(theme: ColorScheme) => void>(
 );
 
 export const BaseThemeProvider = ({ children }: BaseThemeProviderProps) => {
-  const [persistedColorScheme, setPersistedColorScheme] = useRecoilState(
+  const [persistedColorScheme, setPersistedColorScheme] = useRecoilStateV2(
     persistedColorSchemeState,
   );
   const systemColorScheme = useSystemColorScheme();

packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts

@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { persistedColorSchemeState } from '@/ui/theme/states/persistedColorSchemeState';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { type ColorScheme } from '@/workspace-member/types/WorkspaceMember';
 import {
   type IconComponent,
@@ -19,7 +20,9 @@ export const useColorScheme = () => {
   );
 
   const { updateOneRecord } = useUpdateOneRecord();
-  const setPersistedColorScheme = useSetRecoilState(persistedColorSchemeState);
+  const setPersistedColorScheme = useSetRecoilStateV2(
+    persistedColorSchemeState,
+  );
 
   const colorScheme = currentWorkspaceMember?.colorScheme ?? 'System';
 

packages/twenty-front/src/modules/ui/theme/states/persistedColorSchemeState.ts

@@ -1,10 +1,8 @@
-import { atom } from 'recoil';
-
 import { type ColorScheme } from '@/workspace-member/types/WorkspaceMember';
-import { localStorageEffect } from '~/utils/recoil/localStorageEffect';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
-export const persistedColorSchemeState = atom<ColorScheme>({
+export const persistedColorSchemeState = createStateV2<ColorScheme>({
   key: 'persistedColorSchemeState',
-  default: 'System',
-  effects: [localStorageEffect()],
+  defaultValue: 'System',
+  useLocalStorage: true,
 });