diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx index 25621d4bb..f4a6cea37 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx +++ b/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} /> )} diff --git a/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts b/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts index 50c194f43..470f4561f 100644 --- a/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts +++ b/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, }, }, diff --git a/packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts b/packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts index 6cf50bfa3..a6449ec0e 100644 --- a/packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts +++ b/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, diff --git a/packages/twenty-front/src/modules/favorites/utils/calculateNewPosition.ts b/packages/twenty-front/src/modules/favorites/utils/calculateNewPosition.ts index 7758422c1..f10fcddcb 100644 --- a/packages/twenty-front/src/modules/favorites/utils/calculateNewPosition.ts +++ b/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 ); } diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index d3916a1ba..e8c7e8eb3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/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(); }} > - + {rightOptions}