In navigation drawer, cursor should not be drag on hover and some enhancements (#8975)

as per the title- on hover, the draggable items had a grab cursor.
Couldn't change it to a pointer, because then onClick would have a weird
behavior of grab which causes lag onClick.

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

@@ -16,6 +16,7 @@ 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 { createPortal } from 'react-dom';
 import { useLocation } from 'react-router-dom';
@@ -42,6 +43,7 @@ export const CurrentWorkspaceMemberFavorites = ({
 }: CurrentWorkspaceMemberFavoritesProps) => {
   const currentPath = useLocation().pathname;
   const currentViewPath = useLocation().pathname + useLocation().search;
+  const [isDragging, setIsDragging] = useState(false);
 
   const [isFavoriteFolderRenaming, setIsFavoriteFolderRenaming] =
     useState(false);
@@ -113,6 +115,15 @@ 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}
@@ -152,7 +163,8 @@ export const CurrentWorkspaceMemberFavorites = ({
 
         {isOpen && (
           <DraggableList
-            onDragEnd={handleReorderFavorite}
+            onDragEnd={handleDragEnd}
+            onDragStart={handleDragStart}
             draggableItems={
               <>
                 {folder.favorites.map((favorite, index) => (
@@ -180,7 +192,7 @@ export const CurrentWorkspaceMemberFavorites = ({
                             accent="tertiary"
                           />
                         }
-                        isDraggable
+                        isDragging={isDragging}
                       />
                     }
                   />

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

@@ -26,8 +26,12 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
 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 { DragStart, DropResult, ResponderProvided } from '@hello-pangea/dnd';
+import { useState } from 'react';
 
 export const CurrentWorkspaceMemberFavoritesFolders = () => {
+  const [isDragging, setIsDragging] = useState(false);
+
   const currentPath = useLocation().pathname;
   const currentViewPath = useLocation().pathname + useLocation().search;
   const theme = useTheme();
@@ -54,6 +58,16 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
     openNavigationSection();
     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
@@ -103,7 +117,8 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
 
           {orphanFavorites.length > 0 && (
             <DraggableList
-              onDragEnd={handleReorderFavorite}
+              onDragEnd={handleDragEnd}
+              onDragStart={handleDragStart}
               draggableItems={orphanFavorites.map((favorite, index) => (
                 <DraggableItem
                   key={favorite.id}
@@ -129,7 +144,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
                           accent="tertiary"
                         />
                       }
-                      isDraggable={true}
+                      isDragging={isDragging}
                     />
                   }
                 />

packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableList.tsx

@@ -3,12 +3,14 @@ import {
   DragDropContext,
   Droppable,
   OnDragEndResponder,
+  OnDragStartResponder,
 } from '@hello-pangea/dnd';
 import { useState } from 'react';
 import { v4 } from 'uuid';
 type DraggableListProps = {
   draggableItems: React.ReactNode;
   onDragEnd: OnDragEndResponder;
+  onDragStart?: OnDragStartResponder;
 };
 
 const StyledDragDropItemsWrapper = styled.div`
@@ -18,11 +20,12 @@ const StyledDragDropItemsWrapper = styled.div`
 export const DraggableList = ({
   draggableItems,
   onDragEnd,
+  onDragStart,
 }: DraggableListProps) => {
   const [v4Persistable] = useState(v4());
 
   return (
-    <DragDropContext onDragEnd={onDragEnd}>
+    <DragDropContext onDragEnd={onDragEnd} onDragStart={onDragStart}>
       <StyledDragDropItemsWrapper>
         <Droppable droppableId={v4Persistable}>
           {(provided) => (

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

@@ -37,17 +37,17 @@ export type NavigationDrawerItemProps = {
   count?: number;
   keyboard?: string[];
   rightOptions?: ReactNode;
-  isDraggable?: boolean;
+  isDragging?: boolean;
 };
 
 type StyledItemProps = Pick<
   NavigationDrawerItemProps,
-  'active' | 'danger' | 'indentationLevel' | 'soon' | 'to' | 'isDraggable'
+  'active' | 'danger' | 'indentationLevel' | 'soon' | 'to' | 'isDragging'
 > & { isNavigationDrawerExpanded: boolean };
 
 const StyledItem = styled('button', {
   shouldForwardProp: (prop) =>
-    !['active', 'danger', 'soon', 'isDraggable'].includes(prop) &&
+    !['active', 'danger', 'soon', 'isDragging'].includes(prop) &&
     isPropValid(prop),
 })<StyledItemProps>`
   box-sizing: content-box;
@@ -89,16 +89,11 @@ const StyledItem = styled('button', {
     !props.isNavigationDrawerExpanded
       ? `${NAV_DRAWER_WIDTHS.menu.desktop.collapsed - 24}px`
       : '100%'};
-  ${({ isDraggable }) =>
+  ${({ isDragging }) =>
-    isDraggable &&
+    isDragging &&
     ` 
-    cursor: grab;
+          cursor: grabbing;
-    
+        `}
-    &:active {
-      cursor: grabbing;
-    }
-  `}
-
   :hover {
     background: ${({ theme }) => theme.background.transparent.light};
     color: ${(props) =>
@@ -198,7 +193,7 @@ export const NavigationDrawerItem = ({
   keyboard,
   subItemState,
   rightOptions,
-  isDraggable,
+  isDragging,
 }: NavigationDrawerItemProps) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
@@ -231,7 +226,7 @@ export const NavigationDrawerItem = ({
         to={to ? to : undefined}
         indentationLevel={indentationLevel}
         isNavigationDrawerExpanded={isNavigationDrawerExpanded}
-        isDraggable={isDraggable}
+        isDragging={isDragging}
       >
         {showBreadcrumb && (
           <NavigationDrawerAnimatedCollapseWrapper>

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

@@ -18,7 +18,7 @@ export const NavigationDrawerSubItem = ({
   keyboard,
   subItemState,
   rightOptions,
-  isDraggable,
+  isDragging,
 }: NavigationDrawerSubItemProps) => {
   return (
     <NavigationDrawerItem
@@ -35,7 +35,7 @@ export const NavigationDrawerSubItem = ({
       count={count}
       keyboard={keyboard}
       rightOptions={rightOptions}
-      isDraggable={isDraggable}
+      isDragging={isDragging}
     />
   );
 };