Favorites Drag and Drop Implementation #8979
Conversation
ehconitin
changed the title
ehconitin
added
-PR: awaiting review
and removed
-PR: wip
blocked: conflict/dependency
labels
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Implemented comprehensive drag-and-drop functionality for favorites management, allowing users to reorder and move favorites between folders with visual feedback.
- Added
useReorderFavoritehook in/packages/twenty-front/src/modules/favorites/hooks/useReorderFavorite.tsto handle three distinct drag scenarios: folder header drops, inter-folder moves, and intra-folder reordering - Created new
FavoritesDroppablecomponent in/packages/twenty-front/src/modules/favorites/components/FavoritesDroppable.tsxwith visual feedback during drag operations - Implemented separate droppable areas for folder headers and content in
/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx - Added temporary margin workaround in folder boundaries to fix drop detection issues
- Integrated feature flag gating for favorites folder functionality in
/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
4 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile
packages/twenty-front/src/modules/favorites/hooks/useReorderFavorite.ts
Outdated
Show resolved
Hide resolved
| 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 | ||
| > |
There was a problem hiding this comment.
style: The margin workaround could cause layout inconsistencies. Consider using a more robust solution like adjusting the drop target detection area or implementing a custom collision detection algorithm.
packages/twenty-front/src/modules/favorites/components/FavoritesDroppable.tsx
Outdated
Show resolved
Hide resolved
packages/twenty-front/src/modules/favorites/components/FavoritesDroppable.tsx
Show resolved
Hide resolved
|
@ehconitin tested your PR and loved the behavior. However, there is an additional spacing below folder, is it something we want? |
packages/twenty-front/src/modules/favorites/hooks/useReorderFavorite.ts
Outdated
Show resolved
Hide resolved
packages/twenty-front/src/modules/favorites/hooks/useReorderFavorite.ts
Outdated
Show resolved
Hide resolved
| ); | ||
|
|
||
| let newPosition; | ||
| if (destinationFavorites.length === 0) { |
There was a problem hiding this comment.
this position things is already present in getDraggedRecordPosition, can we re-use it?
|
@charlesBochet Tests related to this PR are done! This is regarding the extra padding below each folder. Do you have any ideas? |
|
Thanks @ehconitin for your contribution! |
Suspect IssuesThis pull request was deployed and Sentry observed the following issues:
Did you find this useful? React with a 👍 or 👎 |
Adds drag and drop functionality for favorites management, allowing users to:
Known Issues:
Drop detection at folder boundaries requires spacing workaround