Allow multiple folder to be open at once (#9242)

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();

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;
     }
 

packages/twenty-front/src/modules/favorites/states/activeFavoriteFolderIdState.ts

@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const activeFavoriteFolderIdState = atom<string | null>({
-  key: 'activeFavoriteFolderIdState',
-  default: null,
-});

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: [],
+});