diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx index b2a8c623da0d..c4b6d05f148f 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx @@ -4,7 +4,7 @@ import { IconHandMove, IconSortAZ, IconSortZA, - MenuItem, + MenuItemSelect, } from 'twenty-ui'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; @@ -13,8 +13,8 @@ import { RecordGroupSort } from '@/object-record/record-group/types/RecordGroupS import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; export const ObjectOptionsDropdownRecordGroupSortContent = () => { const { currentContentId, onContentChange, closeDropdown } = @@ -24,7 +24,7 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => { hiddenRecordGroupIdsComponentSelector, ); - const setRecordGroupSort = useSetRecoilComponentStateV2( + const [recordGroupSort, setRecordGroupSort] = useRecoilComponentStateV2( recordIndexRecordGroupSortComponentState, ); @@ -51,24 +51,27 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => { Sort - handleRecordGroupSortChange(RecordGroupSort.Manual)} LeftIcon={IconHandMove} text={RecordGroupSort.Manual} + selected={recordGroupSort === RecordGroupSort.Manual} /> - handleRecordGroupSortChange(RecordGroupSort.Alphabetical) } LeftIcon={IconSortAZ} text={RecordGroupSort.Alphabetical} + selected={recordGroupSort === RecordGroupSort.Alphabetical} /> - handleRecordGroupSortChange(RecordGroupSort.ReverseAlphabetical) } LeftIcon={IconSortZA} text={RecordGroupSort.ReverseAlphabetical} + selected={recordGroupSort === RecordGroupSort.ReverseAlphabetical} />