From 34e95935dc5603212c0c0d1436b3ddb5686a2a08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= <jeremy.magrin@gmail.com>
Date: Thu, 12 Dec 2024 12:03:23 +0100
Subject: [PATCH] fix: group by sort options should have a checkmark when
 selected

---
 ...bjectOptionsDropdownRecordGroupSortContent.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

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
       </DropdownMenuHeader>
       <DropdownMenuItemsContainer>
-        <MenuItem
+        <MenuItemSelect
           onClick={() => handleRecordGroupSortChange(RecordGroupSort.Manual)}
           LeftIcon={IconHandMove}
           text={RecordGroupSort.Manual}
+          selected={recordGroupSort === RecordGroupSort.Manual}
         />
-        <MenuItem
+        <MenuItemSelect
           onClick={() =>
             handleRecordGroupSortChange(RecordGroupSort.Alphabetical)
           }
           LeftIcon={IconSortAZ}
           text={RecordGroupSort.Alphabetical}
+          selected={recordGroupSort === RecordGroupSort.Alphabetical}
         />
-        <MenuItem
+        <MenuItemSelect
           onClick={() =>
             handleRecordGroupSortChange(RecordGroupSort.ReverseAlphabetical)
           }
           LeftIcon={IconSortZA}
           text={RecordGroupSort.ReverseAlphabetical}
+          selected={recordGroupSort === RecordGroupSort.ReverseAlphabetical}
         />
       </DropdownMenuItemsContainer>
     </>