Migrate more to Jotai (#18087)

Continue jotai migration

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { type ReactNode, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -10,16 +10,20 @@ import { arrayToChunks } from '~/utils/array/arrayToChunks';
 
 import { ICON_PICKER_DROPDOWN_CONTENT_WIDTH } from '@/ui/input/components/constants/IconPickerDropdownContentWidth';
 import { IconPickerScrollEffect } from '@/ui/input/hooks/IconPickerScrollEffect';
-import { iconPickerVisibleCountState } from '@/ui/input/states/iconPickerVisibleCountState';
+import {
+  ICON_PICKER_DEFAULT_VISIBLE_COUNT,
+  iconPickerVisibleCountState,
+} from '@/ui/input/states/iconPickerVisibleCountState';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { useFamilyRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilyRecoilValueV2';
 import { type DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { t } from '@lingui/core/macro';
-import { useRecoilValue, useResetRecoilState } from 'recoil';
+import { useStore } from 'jotai';
 import { IconApps, type IconComponent, useIcons } from 'twenty-ui/display';
 import {
   IconButton,
@@ -156,12 +160,18 @@ export const IconPicker = ({
 
   const { closeDropdown } = useCloseDropdown();
 
-  const iconPickerVisibleCount =
-    useRecoilValue(iconPickerVisibleCountState(dropdownId)) ?? maxIconsVisible;
+  const store = useStore();
 
-  const resetIconPickerVisibleCount = useResetRecoilState(
-    iconPickerVisibleCountState(dropdownId),
-  );
+  const iconPickerVisibleCount =
+    useFamilyRecoilValueV2(iconPickerVisibleCountState, dropdownId) ??
+    maxIconsVisible;
+
+  const resetIconPickerVisibleCount = useCallback(() => {
+    store.set(
+      iconPickerVisibleCountState.atomFamily(dropdownId),
+      ICON_PICKER_DEFAULT_VISIBLE_COUNT,
+    );
+  }, [store, dropdownId]);
 
   const { getIcons, getIcon } = useIcons();
   const icons = getIcons();

packages/twenty-front/src/modules/ui/input/hooks/IconPickerScrollEffect.tsx

@@ -1,7 +1,7 @@
+import { iconPickerVisibleCountState } from '@/ui/input/states/iconPickerVisibleCountState';
+import { useSetFamilyRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetFamilyRecoilStateV2';
 import { useScrollWrapperHTMLElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperHTMLElement';
 import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
-import { iconPickerVisibleCountState } from '@/ui/input/states/iconPickerVisibleCountState';
 
 type IconPickerScrollEffectProps = {
   sentinelId: string;
@@ -14,8 +14,9 @@ export const IconPickerScrollEffect = ({
 }: IconPickerScrollEffectProps) => {
   const { scrollWrapperHTMLElement } = useScrollWrapperHTMLElement();
 
-  const setIconPickerVisibleCount = useSetRecoilState(
-    iconPickerVisibleCountState(dropdownId),
+  const setIconPickerVisibleCount = useSetFamilyRecoilStateV2(
+    iconPickerVisibleCountState,
+    dropdownId,
   );
 
   useEffect(() => {

packages/twenty-front/src/modules/ui/input/states/iconPickerVisibleCountState.ts

@@ -1,6 +1,8 @@
-import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
+import { createFamilyStateV2 } from '@/ui/utilities/state/jotai/utils/createFamilyStateV2';
 
-export const iconPickerVisibleCountState = createFamilyState<number, string>({
+export const ICON_PICKER_DEFAULT_VISIBLE_COUNT = 25;
+
+export const iconPickerVisibleCountState = createFamilyStateV2<number, string>({
   key: 'iconPickerVisibleCountState',
-  defaultValue: 25,
+  defaultValue: ICON_PICKER_DEFAULT_VISIBLE_COUNT,
 });