made filter-dropdown-navigable

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx

@@ -10,6 +10,10 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
 import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
+import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 
 export const StyledInput = styled.input`
   background: transparent;
@@ -53,7 +57,15 @@ export const ObjectFilterDropdownFilterSelect = () => {
   const { getIcon } = useIcons();
 
   const setHotkeyScope = useSetHotkeyScope();
-
+  const {isSelectedItemIdSelector} = useSelectableList(OBJECT_FILTER_DROPDOWN_ID)
+  const isSelectedItemId = (id:string)=> useRecoilValue(isSelectedItemIdSelector(id));
+  const refactoredAvailableFilterDefinitions = [...availableFilterDefinitions]
+  .sort((a, b) => a.label.localeCompare(b.label))
+  .filter((item) =>
+    item.label
+      .toLocaleLowerCase()
+      .includes(searchText.toLocaleLowerCase()),
+  )
   return (
     <>
       <StyledInput
@@ -64,18 +76,14 @@ export const ObjectFilterDropdownFilterSelect = () => {
           setSearchText(event.target.value)
         }
       />
+      <SelectableList hotkeyScope={FiltersHotkeyScope.ObjectFilterDropdownButton}  selectableItemIdArray={refactoredAvailableFilterDefinitions.map((item)=>item.fieldMetadataId)} selectableListId={OBJECT_FILTER_DROPDOWN_ID}>
       <DropdownMenuItemsContainer>
-        {[...availableFilterDefinitions]
-          .sort((a, b) => a.label.localeCompare(b.label))
-          .filter((item) =>
-            item.label
-              .toLocaleLowerCase()
-              .includes(searchText.toLocaleLowerCase()),
-          )
+        {refactoredAvailableFilterDefinitions
           .map((availableFilterDefinition, index) => (
             <MenuItem
               key={`select-filter-${index}`}
               testId={`select-filter-${index}`}
+              hovered={isSelectedItemId(availableFilterDefinition.fieldMetadataId)}
               onClick={() => {
                 setFilterDefinitionUsedInDropdown(availableFilterDefinition);
 
@@ -97,6 +105,8 @@ export const ObjectFilterDropdownFilterSelect = () => {
             />
           ))}
       </DropdownMenuItemsContainer>
+      </SelectableList>
+      
     </>
   );
 };

packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx

@@ -27,7 +27,6 @@ export const SelectableMenuItemSelect = ({
   );
 
   const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(entity.id));
-
   return (
     <StyledSelectableItem itemId={entity.id} key={entity.id}>
       <MenuItemSelectAvatar

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx

@@ -20,6 +20,7 @@ export type MenuItemIconButton = {
 };
 
 export type MenuItemProps = {
+  hovered?:boolean;
   accent?: MenuItemAccent;
   className?: string;
   iconButtons?: MenuItemIconButton[];
@@ -36,6 +37,7 @@ export type MenuItemProps = {
 
 export const MenuItem = ({
   accent = 'default',
+  hovered,
   className,
   iconButtons,
   isIconDisplayedOnHoverOnly = true,
@@ -60,6 +62,7 @@ export const MenuItem = ({
 
   return (
     <StyledHoverableMenuItemBase
+      hovered={hovered}
       data-testid={testId ?? undefined}
       onClick={handleMenuItemClick}
       className={className}

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -8,12 +8,13 @@ export type MenuItemBaseProps = {
   accent?: MenuItemAccent;
   isKeySelected?: boolean;
   isHoverBackgroundDisabled?: boolean;
+  hovered?:boolean;
 };
 
 export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
   --horizontal-padding: ${({ theme }) => theme.spacing(1)};
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
-
+  background-color:  ${({ theme,hovered }) => hovered && theme.background.transparent.light};
   align-items: center;
 
   border-radius: ${({ theme }) => theme.border.radius.sm};