Favorites Drag and Drop Implementation (#8979)

Adds drag and drop functionality for favorites management, allowing
users to:

- Move favorites between folders
- Move favorites from folders to orphan section
- Move orphan favorites into folders

Known Issues:
Drop detection at folder boundaries requires spacing workaround

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx

@@ -1,14 +1,14 @@
 import { FavoriteFolderNavigationDrawerItemDropdown } from '@/favorites/components/FavoriteFolderNavigationDrawerItemDropdown';
 import { FavoriteIcon } from '@/favorites/components/FavoriteIcon';
+import { FavoritesDroppable } from '@/favorites/components/FavoritesDroppable';
+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 { useReorderFavorite } from '@/favorites/hooks/useReorderFavorite';
 import { activeFavoriteFolderIdState } from '@/favorites/states/activeFavoriteFolderIdState';
 import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatchingFavorite';
 import { ProcessedFavorite } from '@/favorites/utils/sortFavorites';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
-import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerInput';
@@ -16,8 +16,8 @@ import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/componen
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
-import { DragStart, DropResult, ResponderProvided } from '@hello-pangea/dnd';
-import { useState } from 'react';
+import { Droppable } from '@hello-pangea/dnd';
+import { useContext, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
@@ -43,8 +43,7 @@ export const CurrentWorkspaceMemberFavorites = ({
 }: CurrentWorkspaceMemberFavoritesProps) => {
   const currentPath = useLocation().pathname;
   const currentViewPath = useLocation().pathname + useLocation().search;
-  const [isDragging, setIsDragging] = useState(false);
-
+  const { isDragging } = useContext(FavoritesDragContext);
   const [isFavoriteFolderRenaming, setIsFavoriteFolderRenaming] =
     useState(false);
   const [favoriteFolderName, setFavoriteFolderName] = useState(
@@ -69,7 +68,6 @@ export const CurrentWorkspaceMemberFavorites = ({
   const selectedFavoriteIndex = folder.favorites.findIndex((favorite) =>
     isLocationMatchingFavorite(currentPath, currentViewPath, favorite),
   );
-  const { handleReorderFavorite } = useReorderFavorite();
 
   const { deleteFavorite } = useDeleteFavorite();
 
@@ -115,15 +113,6 @@ export const CurrentWorkspaceMemberFavorites = ({
     setIsDeleteModalOpen(false);
   };
 
-  const handleDragStart = (_: DragStart) => {
-    setIsDragging(true);
-  };
-
-  const handleDragEnd = (result: DropResult, provided: ResponderProvided) => {
-    setIsDragging(false);
-    handleReorderFavorite(result, provided);
-  };
-
   const rightOptions = (
     <FavoriteFolderNavigationDrawerItemDropdown
       folderId={folder.folderId}
@@ -150,23 +139,31 @@ export const CurrentWorkspaceMemberFavorites = ({
             hotkeyScope="favorites-folder-input"
           />
         ) : (
-          <NavigationDrawerItem
-            key={folder.folderId}
-            label={folder.folderName}
-            Icon={isOpen ? IconFolderOpen : IconFolder}
-            onClick={handleToggle}
-            rightOptions={rightOptions}
-            className="navigation-drawer-item"
-            active={isFavoriteFolderEditDropdownOpen}
-          />
+          <FavoritesDroppable droppableId={`folder-header-${folder.folderId}`}>
+            <NavigationDrawerItem
+              label={folder.folderName}
+              Icon={isOpen ? IconFolderOpen : IconFolder}
+              onClick={handleToggle}
+              rightOptions={rightOptions}
+              className="navigation-drawer-item"
+              active={isFavoriteFolderEditDropdownOpen}
+            />
+          </FavoritesDroppable>
         )}
 
         {isOpen && (
-          <DraggableList
-            onDragEnd={handleDragEnd}
-            onDragStart={handleDragStart}
-            draggableItems={
-              <>
+          <Droppable droppableId={`folder-${folder.folderId}`}>
+            {(provided) => (
+              <div
+                ref={provided.innerRef}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...provided.droppableProps}
+                style={{
+                  marginBottom: 15,
+                }}
+                // TODO: (Drag Drop Bug) Adding bottom margin to ensure drag-to-last-position works. Need to find better solution that doesn't affect spacing.
+                // Issue: Without margin, dragging to last position triggers next folder drop area
+              >
                 {folder.favorites.map((favorite, index) => (
                   <DraggableItem
                     key={favorite.id}
@@ -175,7 +172,6 @@ export const CurrentWorkspaceMemberFavorites = ({
                     isInsideScrollableContainer
                     itemComponent={
                       <NavigationDrawerSubItem
-                        key={favorite.id}
                         label={favorite.labelIdentifier}
                         Icon={() => <FavoriteIcon favorite={favorite} />}
                         to={favorite.link}
@@ -197,9 +193,10 @@ export const CurrentWorkspaceMemberFavorites = ({
                     }
                   />
                 ))}
-              </>
-            }
-          />
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
         )}
       </NavigationDrawerItemsCollapsableContainer>
 

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx

@@ -1,47 +1,23 @@
-import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import {
-  IconFolderPlus,
-  IconHeartOff,
-  LightIconButton,
-  isDefined,
-} from 'twenty-ui';
+import { IconFolderPlus, LightIconButton, isDefined } from 'twenty-ui';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { FavoriteIcon } from '@/favorites/components/FavoriteIcon';
+import { CurrentWorkspaceMemberOrphanFavorites } from '@/favorites/components/CurrentWorkspaceMemberOrphanFavorites';
+import { FavoritesDragProvider } from '@/favorites/components/FavoritesDragProvider';
 import { FavoriteFolders } from '@/favorites/components/FavoritesFolders';
 import { FavoritesSkeletonLoader } from '@/favorites/components/FavoritesSkeletonLoader';
-import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
-import { useReorderFavorite } from '@/favorites/hooks/useReorderFavorite';
 import { isFavoriteFolderCreatingState } from '@/favorites/states/isFavoriteFolderCreatingState';
-import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatchingFavorite';
 import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
-import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
-import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
-import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import styled from '@emotion/styled';
-import { DragStart, DropResult, ResponderProvided } from '@hello-pangea/dnd';
-import { useState } from 'react';
-
-const StyledOrphanFavoritesContainer = styled.div`
-  margin-bottom: ${({ theme }) => theme.betweenSiblingsGap};
-`;
 
 export const CurrentWorkspaceMemberFavoritesFolders = () => {
-  const [isDragging, setIsDragging] = useState(false);
-
-  const currentPath = useLocation().pathname;
-  const currentViewPath = useLocation().pathname + useLocation().search;
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const { sortedFavorites: favorites } = useFavorites();
-  const { deleteFavorite } = useDeleteFavorite();
-  const { handleReorderFavorite } = useReorderFavorite();
   const [isFavoriteFolderCreating, setIsFavoriteFolderCreating] =
     useRecoilState(isFavoriteFolderCreatingState);
 
@@ -62,15 +38,6 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
     setIsFavoriteFolderCreating((current) => !current);
   };
 
-  const handleDragStart = (_: DragStart) => {
-    setIsDragging(true);
-  };
-
-  const handleDragEnd = (result: DropResult, provided: ResponderProvided) => {
-    setIsDragging(false);
-    handleReorderFavorite(result, provided);
-  };
-
   const shouldDisplayFavoritesWithFeatureFlagEnabled = true;
 
   //todo: remove this logic once feature flag gating is removed
@@ -85,10 +52,6 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
     return <FavoritesSkeletonLoader />;
   }
 
-  const orphanFavorites = favorites.filter(
-    (favorite) => !favorite.favoriteFolderId,
-  );
-
   if (!shouldDisplayFavorites) {
     return null;
   }
@@ -112,52 +75,14 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
       </NavigationDrawerAnimatedCollapseWrapper>
 
       {isNavigationSectionOpen && (
-        <>
+        <FavoritesDragProvider>
           {isFavoriteFolderEnabled && (
             <FavoriteFolders
               isNavigationSectionOpen={isNavigationSectionOpen}
             />
           )}
-
-          {orphanFavorites.length > 0 && (
-            <DraggableList
-              onDragEnd={handleDragEnd}
-              onDragStart={handleDragStart}
-              draggableItems={orphanFavorites.map((favorite, index) => (
-                <DraggableItem
-                  key={favorite.id}
-                  draggableId={favorite.id}
-                  index={index}
-                  isInsideScrollableContainer={true}
-                  itemComponent={
-                    <StyledOrphanFavoritesContainer>
-                      <NavigationDrawerItem
-                        key={favorite.id}
-                        className="navigation-drawer-item"
-                        label={favorite.labelIdentifier}
-                        Icon={() => <FavoriteIcon favorite={favorite} />}
-                        active={isLocationMatchingFavorite(
-                          currentPath,
-                          currentViewPath,
-                          favorite,
-                        )}
-                        to={favorite.link}
-                        rightOptions={
-                          <LightIconButton
-                            Icon={IconHeartOff}
-                            onClick={() => deleteFavorite(favorite.id)}
-                            accent="tertiary"
-                          />
-                        }
-                        isDragging={isDragging}
-                      />
-                    </StyledOrphanFavoritesContainer>
-                  }
-                />
-              ))}
-            />
-          )}
-        </>
+          <CurrentWorkspaceMemberOrphanFavorites />
+        </FavoritesDragProvider>
       )}
     </NavigationDrawerSection>
   );

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx

@@ -0,0 +1,67 @@
+import { FavoriteIcon } from '@/favorites/components/FavoriteIcon';
+import { FavoritesDroppable } from '@/favorites/components/FavoritesDroppable';
+import { FavoritesDragContext } from '@/favorites/contexts/FavoritesDragContext';
+import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite';
+import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatchingFavorite';
+import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import styled from '@emotion/styled';
+import { LightIconButton } from '@ui/input/button/components/LightIconButton';
+import { useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { IconHeartOff } from 'twenty-ui';
+
+const StyledEmptyContainer = styled.div`
+  height: ${({ theme }) => theme.spacing(2.5)};
+  width: 100%;
+`;
+
+export const CurrentWorkspaceMemberOrphanFavorites = () => {
+  const { sortedFavorites: favorites } = useFavorites();
+  const { deleteFavorite } = useDeleteFavorite();
+  const currentPath = useLocation().pathname;
+  const currentViewPath = useLocation().pathname + useLocation().search;
+  const { isDragging } = useContext(FavoritesDragContext);
+
+  const orphanFavorites = favorites.filter(
+    (favorite) => !favorite.favoriteFolderId,
+  );
+
+  return (
+    <FavoritesDroppable droppableId="orphan-favorites">
+      {orphanFavorites.length > 0 ? (
+        orphanFavorites.map((favorite, index) => (
+          <DraggableItem
+            key={favorite.id}
+            draggableId={favorite.id}
+            index={index}
+            isInsideScrollableContainer={true}
+            itemComponent={
+              <NavigationDrawerItem
+                label={favorite.labelIdentifier}
+                Icon={() => <FavoriteIcon favorite={favorite} />}
+                active={isLocationMatchingFavorite(
+                  currentPath,
+                  currentViewPath,
+                  favorite,
+                )}
+                to={favorite.link}
+                rightOptions={
+                  <LightIconButton
+                    Icon={IconHeartOff}
+                    onClick={() => deleteFavorite(favorite.id)}
+                    accent="tertiary"
+                  />
+                }
+                isDragging={isDragging}
+              />
+            }
+          />
+        ))
+      ) : (
+        <StyledEmptyContainer />
+      )}
+    </FavoritesDroppable>
+  );
+};

packages/twenty-front/src/modules/favorites/components/FavoritesDragProvider.tsx

@@ -0,0 +1,37 @@
+import { FavoritesDragContext } from '@/favorites/contexts/FavoritesDragContext';
+import { useHandleFavoriteDragAndDrop } from '@/favorites/hooks/useHandleFavoriteDragAndDrop';
+import {
+  DragDropContext,
+  DragStart,
+  DropResult,
+  ResponderProvided,
+} from '@hello-pangea/dnd';
+import { ReactNode, useState } from 'react';
+
+type FavoritesDragProviderProps = {
+  children: ReactNode;
+};
+
+export const FavoritesDragProvider = ({
+  children,
+}: FavoritesDragProviderProps) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const { handleFavoriteDragAndDrop } = useHandleFavoriteDragAndDrop();
+
+  const handleDragStart = (_: DragStart) => {
+    setIsDragging(true);
+  };
+
+  const handleDragEnd = (result: DropResult, provided: ResponderProvided) => {
+    setIsDragging(false);
+    handleFavoriteDragAndDrop(result, provided);
+  };
+
+  return (
+    <FavoritesDragContext.Provider value={{ isDragging }}>
+      <DragDropContext onDragEnd={handleDragEnd} onDragStart={handleDragStart}>
+        {children}
+      </DragDropContext>
+    </FavoritesDragContext.Provider>
+  );
+};

packages/twenty-front/src/modules/favorites/components/FavoritesDroppable.tsx

@@ -0,0 +1,70 @@
+import styled from '@emotion/styled';
+import { Droppable } from '@hello-pangea/dnd';
+
+type FavoritesDroppableProps = {
+  droppableId: string;
+  children: React.ReactNode;
+  isDragIndicatorVisible?: boolean;
+  showDropLine?: boolean;
+};
+
+const StyledDroppableWrapper = styled.div<{
+  isDraggingOver: boolean;
+  isDragIndicatorVisible: boolean;
+  showDropLine: boolean;
+}>`
+  position: relative;
+  transition: all 150ms ease-in-out;
+  width: 100%;
+
+  ${({ isDraggingOver, isDragIndicatorVisible, showDropLine, theme }) =>
+    isDraggingOver &&
+    isDragIndicatorVisible &&
+    `
+        background-color: ${theme.background.transparent.blue};
+        
+        ${
+          showDropLine &&
+          `
+          &::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: ${theme.color.blue};
+            border-radius: ${theme.border.radius.sm} ${theme.border.radius.sm} 0 0;
+          }
+        `
+        }
+      `}
+`;
+
+export const FavoritesDroppable = ({
+  droppableId,
+  children,
+  isDragIndicatorVisible = true,
+  showDropLine = true,
+}: FavoritesDroppableProps) => {
+  return (
+    <Droppable droppableId={droppableId}>
+      {(provided, snapshot) => (
+        <StyledDroppableWrapper
+          isDraggingOver={snapshot.isDraggingOver}
+          isDragIndicatorVisible={isDragIndicatorVisible}
+          showDropLine={showDropLine}
+        >
+          <div
+            ref={provided.innerRef}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...provided.droppableProps}
+          >
+            {children}
+            {provided.placeholder}
+          </div>
+        </StyledDroppableWrapper>
+      )}
+    </Droppable>
+  );
+};