From e1f8ac4a4c3537dff3fc7941e3b9d7ce9c5e8825 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Fri, 27 Dec 2024 16:00:30 +0530
Subject: [PATCH] Allow multiple folder to be open at once (#9242)

---
 .../CurrentWorkspaceMemberFavorites.tsx       | 17 ++++++++++++-----
 .../hooks/useHandleFavoriteDragAndDrop.ts     | 19 +++++++++++++++----
 .../states/activeFavoriteFolderIdState.ts     |  6 ------
 .../states/openFavoriteFolderIdsState.ts      |  6 ++++++
 4 files changed, 33 insertions(+), 15 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/favorites/states/activeFavoriteFolderIdState.ts
 create mode 100644 packages/twenty-front/src/modules/favorites/states/openFavoriteFolderIdsState.ts

diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
index 47508ad31..e71310d36 100644
--- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
@@ -5,7 +5,7 @@ import { FavoritesDragContext } from '@/favorites/contexts/FavoritesDragContext'
 import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite';
 import { useDeleteFavoriteFolder } from '@/favorites/hooks/useDeleteFavoriteFolder';
 import { useRenameFavoriteFolder } from '@/favorites/hooks/useRenameFavoriteFolder';
-import { activeFavoriteFolderIdState } from '@/favorites/states/activeFavoriteFolderIdState';
+import { openFavoriteFolderIdsState } from '@/favorites/states/openFavoriteFolderIdsState';
 import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatchingFavorite';
 import { ProcessedFavorite } from '@/favorites/utils/sortFavorites';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
@@ -50,13 +50,20 @@ export const CurrentWorkspaceMemberFavorites = ({
     folder.folderName,
   );
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [activeFavoriteFolderId, setActiveFavoriteFolderId] = useRecoilState(
-    activeFavoriteFolderIdState,
+
+  const [openFavoriteFolderIds, setOpenFavoriteFolderIds] = useRecoilState(
+    openFavoriteFolderIdsState,
   );
-  const isOpen = activeFavoriteFolderId === folder.folderId;
+  const isOpen = openFavoriteFolderIds.includes(folder.folderId);
 
   const handleToggle = () => {
-    setActiveFavoriteFolderId(isOpen ? null : folder.folderId);
+    setOpenFavoriteFolderIds((currentOpenFolders) => {
+      if (isOpen) {
+        return currentOpenFolders.filter((id) => id !== folder.folderId);
+      } else {
+        return [...currentOpenFolders, folder.folderId];
+      }
+    });
   };
 
   const { renameFavoriteFolder } = useRenameFavoriteFolder();
diff --git a/packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts b/packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts
index a6449ec0e..f746801b1 100644
--- a/packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts
+++ b/packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts
@@ -1,6 +1,6 @@
 import { FAVORITE_DROPPABLE_IDS } from '@/favorites/constants/FavoriteDroppableIds';
 import { useSortedFavorites } from '@/favorites/hooks/useSortedFavorites';
-import { activeFavoriteFolderIdState } from '@/favorites/states/activeFavoriteFolderIdState';
+import { openFavoriteFolderIdsState } from '@/favorites/states/openFavoriteFolderIdsState';
 import { calculateNewPosition } from '@/favorites/utils/calculateNewPosition';
 import { validateAndExtractFolderId } from '@/favorites/utils/validateAndExtractFolderId';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -15,10 +15,21 @@ export const useHandleFavoriteDragAndDrop = () => {
   const { updateOneRecord: updateOneFavorite } = useUpdateOneRecord({
     objectNameSingular: CoreObjectNameSingular.Favorite,
   });
-  const setActiveFavoriteFolderId = useSetRecoilState(
-    activeFavoriteFolderIdState,
+  const setOpenFavoriteFolderIds = useSetRecoilState(
+    openFavoriteFolderIdsState,
   );
 
+  const openDestinationFolder = (folderId: string | null) => {
+    if (!folderId) return;
+
+    setOpenFavoriteFolderIds((current) => {
+      if (!current.includes(folderId)) {
+        return [...current, folderId];
+      }
+      return current;
+    });
+  };
+
   const handleFavoriteDragAndDrop: OnDragEndResponder = (result) => {
     const { destination, source, draggableId } = result;
 
@@ -64,7 +75,7 @@ export const useHandleFavoriteDragAndDrop = () => {
         },
       });
 
-      setActiveFavoriteFolderId(destinationFolderId);
+      openDestinationFolder(destinationFolderId);
       return;
     }
 
diff --git a/packages/twenty-front/src/modules/favorites/states/activeFavoriteFolderIdState.ts b/packages/twenty-front/src/modules/favorites/states/activeFavoriteFolderIdState.ts
deleted file mode 100644
index 268223a32..000000000
--- a/packages/twenty-front/src/modules/favorites/states/activeFavoriteFolderIdState.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const activeFavoriteFolderIdState = atom<string | null>({
-  key: 'activeFavoriteFolderIdState',
-  default: null,
-});
diff --git a/packages/twenty-front/src/modules/favorites/states/openFavoriteFolderIdsState.ts b/packages/twenty-front/src/modules/favorites/states/openFavoriteFolderIdsState.ts
new file mode 100644
index 000000000..05c6deb93
--- /dev/null
+++ b/packages/twenty-front/src/modules/favorites/states/openFavoriteFolderIdsState.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const openFavoriteFolderIdsState = atom<string[]>({
+  key: 'openFavoriteFolderIdsState',
+  default: [],
+});