revert line and droppable folder init

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

@@ -1,21 +1,21 @@
 import { FavoriteFolderNavigationDrawerItemDropdown } from '@/favorites/components/FavoriteFolderNavigationDrawerItemDropdown';
 import { FavoriteIcon } from '@/favorites/components/FavoriteIcon';
+import { FavoritesDroppable } from '@/favorites/components/FavoritesDroppable';
 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 { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatchingFavorite';
 import { ProcessedFavorite } from '@/favorites/utils/sortFavorites';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
-import { DraggableListWithoutContext } from '@/ui/layout/draggable-list/components/DraggableListWithoutContext';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DroppableList } from '@/ui/layout/droppable-list/components/DroppableList';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerInput';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 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 { Droppable } from '@hello-pangea/dnd';
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useLocation } from 'react-router-dom';
@@ -138,24 +138,26 @@ export const CurrentWorkspaceMemberFavorites = ({
             hotkeyScope="favorites-folder-input"
           />
         ) : (
-          <DroppableList droppableId={`folder-header-${folder.folderId}`}>
+          <FavoritesDroppable droppableId={`folder-header-${folder.folderId}`}>
             <NavigationDrawerItem
-              key={folder.folderId}
               label={folder.folderName}
               Icon={isOpen ? IconFolderOpen : IconFolder}
               onClick={handleToggle}
               rightOptions={rightOptions}
               className="navigation-drawer-item"
               active={isFavoriteFolderEditDropdownOpen}
             />
-          </DroppableList>
+          </FavoritesDroppable>
         )}
 
         {isOpen && (
-          <DraggableListWithoutContext
-            droppableId={`folder-${folder.folderId}`}
-            draggableItems={
-              <>
+          <Droppable droppableId={`folder-${folder.folderId}`}>
+            {(provided) => (
+              <div
+                ref={provided.innerRef}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...provided.droppableProps}
+              >
                 {folder.favorites.map((favorite, index) => (
                   <DraggableItem
                     key={favorite.id}
@@ -164,7 +166,6 @@ export const CurrentWorkspaceMemberFavorites = ({
                     isInsideScrollableContainer
                     itemComponent={
                       <NavigationDrawerSubItem
-                        key={favorite.id}
                         label={favorite.labelIdentifier}
                         Icon={() => <FavoriteIcon favorite={favorite} />}
                         to={favorite.link}
@@ -186,9 +187,10 @@ export const CurrentWorkspaceMemberFavorites = ({
                     }
                   />
                 ))}
-              </>
-            }
-          />
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
         )}
       </NavigationDrawerItemsCollapsableContainer>
 

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

@@ -10,22 +10,29 @@ import {
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { FavoriteIcon } from '@/favorites/components/FavoriteIcon';
+import { FavoritesDroppable } from '@/favorites/components/FavoritesDroppable';
 import { FavoriteFolders } from '@/favorites/components/FavoritesFolders';
 import { FavoritesSkeletonLoader } from '@/favorites/components/FavoritesSkeletonLoader';
-import { FavoritesDragDropContext } from '@/favorites/contexts/FavoritesDragDropContext';
 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 { DraggableListWithoutContext } from '@/ui/layout/draggable-list/components/DraggableListWithoutContext';
 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 { DragDropContext } from '@hello-pangea/dnd';
+
+const StyledEmptyContainer = styled.div`
+  height: 10px;
+  width: 100%;
+`;
 
 export const CurrentWorkspaceMemberFavoritesFolders = () => {
   const currentPath = useLocation().pathname;
@@ -36,6 +43,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
   const { deleteFavorite } = useDeleteFavorite();
   const [isFavoriteFolderCreating, setIsFavoriteFolderCreating] =
     useRecoilState(isFavoriteFolderCreatingState);
+  const { handleReorderFavorite } = useReorderFavorite();
 
   const isFavoriteFolderEnabled = useIsFeatureEnabled(
     'IS_FAVORITE_FOLDER_ENABLED',
@@ -93,26 +101,23 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
       </NavigationDrawerAnimatedCollapseWrapper>
 
       {isNavigationSectionOpen && (
-        <FavoritesDragDropContext>
+        <DragDropContext onDragEnd={handleReorderFavorite}>
           {isFavoriteFolderEnabled && (
             <FavoriteFolders
               isNavigationSectionOpen={isNavigationSectionOpen}
             />
           )}
 
-          {orphanFavorites.length > 0 && (
-            <DraggableListWithoutContext
-              droppableId="orphan-favorites"
-              draggableItems={orphanFavorites.map((favorite, index) => (
+          <FavoritesDroppable droppableId="orphan-favorites">
+            {orphanFavorites.length > 0 ? (
+              orphanFavorites.map((favorite, index) => (
                 <DraggableItem
                   key={favorite.id}
                   draggableId={favorite.id}
                   index={index}
                   isInsideScrollableContainer={true}
                   itemComponent={
                     <NavigationDrawerItem
-                      key={favorite.id}
-                      className="navigation-drawer-item"
                       label={favorite.labelIdentifier}
                       Icon={() => <FavoriteIcon favorite={favorite} />}
                       active={isLocationMatchingFavorite(
@@ -132,10 +137,12 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
                     />
                   }
                 />
-              ))}
-            />
-          )}
-        </FavoritesDragDropContext>
+              ))
+            ) : (
+              <StyledEmptyContainer />
+            )}
+          </FavoritesDroppable>
+        </DragDropContext>
       )}
     </NavigationDrawerSection>
   );

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.color.blueAccent20};
+        
+        ${
+          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>
+  );
+};