Refactor and fixes dropdown bugs (#8807)

Fixes https://github.com/twentyhq/twenty/issues/8788
Fixes https://github.com/twentyhq/twenty/issues/8793
Fixes https://github.com/twentyhq/twenty/issues/8791
Fixes https://github.com/twentyhq/twenty/issues/8890
Fixes https://github.com/twentyhq/twenty/issues/8893

- [x] Also : 

Icon buttons under dropdown are visible without blur : 

![Capture d’écran du 2024-11-29
15-09-53](https://github.com/user-attachments/assets/f563333d-4e43-4ded-acc7-62e116004ed9)

- [x] Also : 

<img width="237" alt="image"
src="https://github.com/user-attachments/assets/e4c70936-beff-4481-89cb-0a32a36e0ee2">

- [x] Also : 

<img width="335" alt="image"
src="https://github.com/user-attachments/assets/5be60395-6baf-49eb-8d40-197add049e20">

- [x] Also : 

<img width="287" alt="image"
src="https://github.com/user-attachments/assets/a317561f-7986-4d70-a1c0-deee4f4e268a">

- Button create new without padding
- Container is expanding

- [x] Also : 

<img width="303" alt="image"
src="https://github.com/user-attachments/assets/09f8a27f-91db-4191-acdc-aaaeedaf6da5">

- [x] Also : 

<img width="133" alt="image"
src="https://github.com/user-attachments/assets/fe17b32e-f7a4-46c4-8040-239eaf8198e8">

Font is cut at bottom ?

- [x] Also : 

<img width="385" alt="image"
src="https://github.com/user-attachments/assets/7bab2092-2936-4112-a2ee-d32d6737e304">

The component should flip and not resize in this situation

- [x] Also : 

<img width="244" alt="image"
src="https://github.com/user-attachments/assets/5384f49a-71f9-4638-a60c-158cc8c83f81">

- [x] Also : 


![image](https://github.com/user-attachments/assets/9cd1f43a-df59-401e-9a41-bdb8e93ebe58)

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

@@ -1,6 +1,8 @@
 import { useRecoilState } from 'recoil';
 
 import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
+import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
+import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
 import { useCallback } from 'react';
@@ -17,6 +19,12 @@ export const useDropdown = (dropdownId?: string) => {
     dropdownScopeId: getScopeIdOrUndefinedFromComponentId(dropdownId),
   });
 
+  const { setActiveDropdownFocusIdAndMemorizePrevious } =
+    useSetActiveDropdownFocusIdAndMemorizePrevious();
+
+  const { goBackToPreviousDropdownFocusId } =
+    useGoBackToPreviousDropdownFocusId();
+
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -34,17 +42,28 @@ export const useDropdown = (dropdownId?: string) => {
     useRecoilState(isDropdownOpenState);
 
   const closeDropdown = useCallback(() => {
-    goBackToPreviousHotkeyScope();
-    setIsDropdownOpen(false);
-  }, [goBackToPreviousHotkeyScope, setIsDropdownOpen]);
+    if (isDropdownOpen) {
+      goBackToPreviousHotkeyScope();
+      setIsDropdownOpen(false);
+      goBackToPreviousDropdownFocusId();
+    }
+  }, [
+    isDropdownOpen,
+    goBackToPreviousHotkeyScope,
+    setIsDropdownOpen,
+    goBackToPreviousDropdownFocusId,
+  ]);
 
   const openDropdown = () => {
-    setIsDropdownOpen(true);
-    if (isDefined(dropdownHotkeyScope)) {
-      setHotkeyScopeAndMemorizePreviousScope(
-        dropdownHotkeyScope.scope,
-        dropdownHotkeyScope.customScopes,
-      );
+    if (!isDropdownOpen) {
+      setIsDropdownOpen(true);
+      setActiveDropdownFocusIdAndMemorizePrevious(dropdownId ?? scopeId);
+      if (isDefined(dropdownHotkeyScope)) {
+        setHotkeyScopeAndMemorizePreviousScope(
+          dropdownHotkeyScope.scope,
+          dropdownHotkeyScope.customScopes,
+        );
+      }
     }
   };
 

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

@@ -0,0 +1,23 @@
+import { useRecoilCallback } from 'recoil';
+
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { previousDropdownFocusIdState } from '@/ui/layout/dropdown/states/previousDropdownFocusIdState';
+
+export const useGoBackToPreviousDropdownFocusId = () => {
+  const goBackToPreviousDropdownFocusId = useRecoilCallback(
+    ({ snapshot, set }) =>
+      () => {
+        const previouslyFocusedDropdownId = snapshot
+          .getLoadable(previousDropdownFocusIdState)
+          .getValue();
+
+        set(activeDropdownFocusIdState, previouslyFocusedDropdownId);
+        set(previousDropdownFocusIdState, null);
+      },
+    [],
+  );
+
+  return {
+    goBackToPreviousDropdownFocusId,
+  };
+};

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

@@ -0,0 +1,23 @@
+import { useRecoilCallback } from 'recoil';
+
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { previousDropdownFocusIdState } from '@/ui/layout/dropdown/states/previousDropdownFocusIdState';
+
+export const useSetActiveDropdownFocusIdAndMemorizePrevious = () => {
+  const setActiveDropdownFocusIdAndMemorizePrevious = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (dropdownId: string) => {
+        const focusedDropdownId = snapshot
+          .getLoadable(activeDropdownFocusIdState)
+          .getValue();
+
+        set(previousDropdownFocusIdState, focusedDropdownId);
+        set(activeDropdownFocusIdState, dropdownId);
+      },
+    [],
+  );
+
+  return {
+    setActiveDropdownFocusIdAndMemorizePrevious,
+  };
+};