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/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 }) =>
-    isDraggable &&
-    `
-    cursor: grab;
-    
-    &:active {
-      cursor: grabbing;
-    }
-  `}
-
+  ${({ isDragging }) =>
+    isDragging &&
+    ` 
+          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}
     />
   );
 };