From 5f2a39d9e9d7691717ab619811c312716f89b8c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= <jeremy.magrin@gmail.com>
Date: Thu, 12 Dec 2024 12:18:53 +0100
Subject: [PATCH] fix: group by sort options should have a checkmark when
 selected (#9038)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix #8966

This PR is adding a checkmark beside the selected sort option in the
`Options` dropdown menu.

<img width="225" alt="Screenshot 2024-12-12 at 12 03 18 PM"
src="https://github.com/user-attachments/assets/81783bc0-5aea-4f0d-9327-c70f3e70edb6"
/>
---
 ...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 b2a8c623d..c4b6d05f1 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>
     </>