fix: Close the email side panel upon clicking an open email thread (#4329)

* fix: state consistency issue while closing the email thread right drawer (#4205)

* Refactored to use useRecoilCallback in RightDrawer open/close hook

* - registered an email drawer click outside callback to memorize the thread id when drawer was closed
- added a state to memorize then event that triggered right drawer close
- added a predicate that checks if event that close email thread right drawer is not the same that the open email thread click event AND that the thread that we want to open is not the thread that is just being closed.

---------

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

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx

@@ -2,10 +2,11 @@ import { useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
+import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
 import { ClickOutsideMode } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@@ -58,9 +59,20 @@ export const RightDrawer = () => {
 
   useListenClickOutside({
     refs: [rightDrawerRef],
-    callback: () => {
-      closeRightDrawer();
-    },
+    callback: useRecoilCallback(
+      ({ snapshot, set }) =>
+        (event) => {
+          const isRightDrawerOpen = snapshot
+            .getLoadable(isRightDrawerOpenState())
+            .getValue();
+
+          if (isRightDrawerOpen) {
+            set(rightDrawerCloseEventState(), event);
+            closeRightDrawer();
+          }
+        },
+      [closeRightDrawer],
+    ),
     mode: ClickOutsideMode.comparePixels,
   });
 

packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts

@@ -1,4 +1,6 @@
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilState } from 'recoil';
+
+import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
 
 import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
@@ -6,32 +8,50 @@ import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
 
 export const useRightDrawer = () => {
-  const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
-    isRightDrawerOpenState(),
-  );
-  const setIsRightDrawerExpanded = useSetRecoilState(
-    isRightDrawerExpandedState(),
+  const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState());
+
+  const [rightDrawerPage] = useRecoilState(rightDrawerPageState());
+
+  const openRightDrawer = useRecoilCallback(
+    ({ set }) =>
+      (rightDrawerPage: RightDrawerPages) => {
+        set(rightDrawerPageState(), rightDrawerPage);
+        set(isRightDrawerExpandedState(), false);
+        set(isRightDrawerOpenState(), true);
+      },
+    [],
   );
 
-  const [rightDrawerPage, setRightDrawerPage] = useRecoilState(
-    rightDrawerPageState(),
+  const closeRightDrawer = useRecoilCallback(
+    ({ set }) =>
+      () => {
+        set(isRightDrawerExpandedState(), false);
+        set(isRightDrawerOpenState(), false);
+      },
+    [],
   );
 
-  const openRightDrawer = (rightDrawerPage: RightDrawerPages) => {
-    setRightDrawerPage(rightDrawerPage);
-    setIsRightDrawerExpanded(false);
-    setIsRightDrawerOpen(true);
-  };
+  const isSameEventThanRightDrawerClose = useRecoilCallback(
+    ({ snapshot }) =>
+      (event: MouseEvent | TouchEvent) => {
+        const rightDrawerCloseEvent = snapshot
+          .getLoadable(rightDrawerCloseEventState())
+          .getValue();
 
-  const closeRightDrawer = () => {
-    setIsRightDrawerExpanded(false);
-    setIsRightDrawerOpen(false);
-  };
+        const isSameEvent =
+          rightDrawerCloseEvent?.target === event.target &&
+          rightDrawerCloseEvent?.timeStamp === event.timeStamp;
+
+        return isSameEvent;
+      },
+    [],
+  );
 
   return {
     rightDrawerPage,
     isRightDrawerOpen,
     openRightDrawer,
     closeRightDrawer,
+    isSameEventThanRightDrawerClose,
   };
 };

packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts

@@ -0,0 +1,6 @@
+import { createState } from '@/ui/utilities/state/utils/createState';
+
+export const rightDrawerCloseEventState = createState<Event | null>({
+  key: 'rightDrawerCloseEventState',
+  defaultValue: null,
+});