Fix position calculations -- favorites (#9202)

Co-authored-by: Weiko <corentin@twenty.com>

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

@@ -146,7 +146,7 @@ export const CurrentWorkspaceMemberFavorites = ({
               onClick={handleToggle}
               rightOptions={rightOptions}
               className="navigation-drawer-item"
-              active={isFavoriteFolderEditDropdownOpen}
+              isRightOptionsDropdownOpen={isFavoriteFolderEditDropdownOpen}
             />
           </FavoritesDroppable>
         )}

packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts

@@ -724,7 +724,7 @@ export const mocks = [
       variables: {
         idToUpdate: '1',
         input: {
-          position: 2,
+          position: 3,
         },
       },
     },
@@ -733,7 +733,7 @@ export const mocks = [
         updateFavorite: {
           __typename: 'Favorite',
           id: favoriteId,  
-          position: 2,
+          position: 3,
         },
       },
     })),
@@ -746,7 +746,7 @@ export const mocks = [
       variables: {
         idToUpdate: '1',
         input: {
-          position: 0,
+          position: 1,
           favoriteFolderId: '2',
         },
       },
@@ -756,7 +756,7 @@ export const mocks = [
         updateFavorite: {
           __typename: 'Favorite',
           id: favoriteId,
-          position: 0,
+          position: 1,
           favoriteFolderId: '2',
         },
       },
@@ -770,7 +770,7 @@ export const mocks = [
       variables: {
         idToUpdate: '1',
         input: {
-          position: 0,
+          position: 1,
           favoriteFolderId: null,
         },
       },
@@ -780,7 +780,7 @@ export const mocks = [
         updateFavorite: {
           __typename: 'Favorite',
           id: favoriteId,
-          position: 0,
+          position: 1,
           favoriteFolderId: null,
         },
       },

packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts

@@ -53,7 +53,7 @@ export const useHandleFavoriteDragAndDrop = () => {
 
       const newPosition =
         folderFavorites.length === 0
-          ? 0
+          ? 1
           : folderFavorites[folderFavorites.length - 1].position + 1;
 
       updateOneFavorite({
@@ -75,9 +75,9 @@ export const useHandleFavoriteDragAndDrop = () => {
 
       let newPosition;
       if (destinationFavorites.length === 0) {
-        newPosition = 0;
+        newPosition = 1;
       } else if (destination.index === 0) {
-        newPosition = destinationFavorites[0].position / 2;
+        newPosition = destinationFavorites[0].position - 1;
       } else if (destination.index >= destinationFavorites.length) {
         newPosition =
           destinationFavorites[destinationFavorites.length - 1].position + 1;
@@ -99,9 +99,9 @@ export const useHandleFavoriteDragAndDrop = () => {
       return;
     }
 
-    const favoritesInSameList = favoritesSorted.filter(
-      (favorite) => favorite.favoriteFolderId === sourceFolderId,
-    );
+    const favoritesInSameList = favoritesSorted
+      .filter((favorite) => favorite.favoriteFolderId === sourceFolderId)
+      .filter((favorite) => favorite.id !== draggableId);
 
     const newPosition = calculateNewPosition({
       destinationIndex: destination.index,

packages/twenty-front/src/modules/favorites/utils/calculateNewPosition.ts

@@ -10,18 +10,19 @@ export const calculateNewPosition = ({
   items,
 }: CalculateNewPositionParams): number => {
   if (destinationIndex === 0) {
-    return items[0].position / 2;
+    return items[0].position - 1;
   }
 
-  if (destinationIndex === items.length - 1) {
-    return items[destinationIndex - 1].position + 1;
+  if (destinationIndex === items.length) {
+    return items[items.length - 1].position + 1;
   }
 
   if (destinationIndex > sourceIndex) {
     return (
-      (items[destinationIndex + 1].position +
+      items[destinationIndex].position +
+      (items[destinationIndex - 1].position -
         items[destinationIndex].position) /
-      2
+        2
     );
   }
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -40,6 +40,7 @@ export type NavigationDrawerItemProps = {
   keyboard?: string[];
   rightOptions?: ReactNode;
   isDragging?: boolean;
+  isRightOptionsDropdownOpen?: boolean;
 };
 
 type StyledItemProps = Pick<
@@ -211,6 +212,7 @@ const visibleStateStyles = css`
 
 const StyledRightOptionsVisbility = styled.div<{
   isMobile: boolean;
+  isRightOptionsDropdownOpen?: boolean;
 }>`
   display: block;
   opacity: 0;
@@ -223,7 +225,8 @@ const StyledRightOptionsVisbility = styled.div<{
   height: 1px;
   width: 1px;
 
-  ${({ isMobile }) => isMobile && visibleStateStyles}
+  ${({ isMobile, isRightOptionsDropdownOpen }) =>
+    (isMobile || isRightOptionsDropdownOpen) && visibleStateStyles}
 
   .navigation-drawer-item:hover & {
     ${visibleStateStyles}
@@ -246,6 +249,7 @@ export const NavigationDrawerItem = ({
   subItemState,
   rightOptions,
   isDragging,
+  isRightOptionsDropdownOpen,
 }: NavigationDrawerItemProps) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
@@ -345,7 +349,12 @@ export const NavigationDrawerItem = ({
                   e.preventDefault();
                 }}
               >
-                <StyledRightOptionsVisbility isMobile={isMobile}>
+                <StyledRightOptionsVisbility
+                  isMobile={isMobile}
+                  isRightOptionsDropdownOpen={
+                    isRightOptionsDropdownOpen || false
+                  }
+                >
                   {rightOptions}
                 </StyledRightOptionsVisbility>
               </StyledRightOptionsContainer>