3886 - Shortcut Sort/Filter (#3901)

Closes #3886

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -14,6 +14,7 @@ import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import { isDefined } from '~/utils/isDefined';
 
 import { useDropdown } from '../hooks/useDropdown';
@@ -92,7 +93,7 @@ export const Dropdown = ({
   });
 
   useInternalHotkeyScopeManagement({
-    dropdownScopeId: `${dropdownId}-scope`,
+    dropdownScopeId: getScopeIdFromComponentId(dropdownId),
     dropdownHotkeyScopeFromParent: dropdownHotkeyScope,
   });
 
@@ -106,7 +107,7 @@ export const Dropdown = ({
   );
 
   return (
-    <DropdownScope dropdownScopeId={`${dropdownId}-scope`}>
+    <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
       <div ref={containerRef} className={className}>
         {clickableComponent && (
           <div

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownV2.ts

@@ -0,0 +1,85 @@
+import { useRecoilCallback } from 'recoil';
+
+import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
+import { isDefined } from '~/utils/isDefined';
+
+export const useDropdownV2 = () => {
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  const closeDropdown = useRecoilCallback(
+    ({ set }) =>
+      (specificComponentId: string) => {
+        const scopeId = getScopeIdFromComponentId(specificComponentId);
+
+        goBackToPreviousHotkeyScope();
+        set(
+          isDropdownOpenComponentState({
+            scopeId,
+          }),
+          false,
+        );
+      },
+    [goBackToPreviousHotkeyScope],
+  );
+
+  const openDropdown = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (specificComponentId: string, customHotkeyScope?: HotkeyScope) => {
+        const scopeId = getScopeIdFromComponentId(specificComponentId);
+
+        const dropdownHotkeyScope = snapshot
+          .getLoadable(dropdownHotkeyComponentState({ scopeId }))
+          .getValue();
+
+        set(
+          isDropdownOpenComponentState({
+            scopeId,
+          }),
+          true,
+        );
+
+        if (isDefined(customHotkeyScope)) {
+          setHotkeyScopeAndMemorizePreviousScope(
+            customHotkeyScope.scope,
+            customHotkeyScope.customScopes,
+          );
+        } else if (isDefined(dropdownHotkeyScope)) {
+          setHotkeyScopeAndMemorizePreviousScope(
+            dropdownHotkeyScope.scope,
+            dropdownHotkeyScope.customScopes,
+          );
+        }
+      },
+    [setHotkeyScopeAndMemorizePreviousScope],
+  );
+
+  const toggleDropdown = useRecoilCallback(
+    ({ snapshot }) =>
+      (specificComponentId: string) => {
+        const scopeId = getScopeIdFromComponentId(specificComponentId);
+        const isDropdownOpen = snapshot
+          .getLoadable(isDropdownOpenComponentState({ scopeId }))
+          .getValue();
+
+        if (isDropdownOpen) {
+          closeDropdown(specificComponentId);
+        } else {
+          openDropdown(specificComponentId);
+        }
+      },
+    [closeDropdown, openDropdown],
+  );
+
+  return {
+    closeDropdown,
+    openDropdown,
+    toggleDropdown,
+  };
+};