Removed drag grip and accent is now tertiary in hidden fields (#6650)

Closes #6115

This change successfully addresses the issue as described. However, it
also causes the primary non-draggable field, `Name`, to render without a
draggable handle and with a secondary accent. Is this an acceptable
outcome?



https://github.com/user-attachments/assets/4bc15e00-6c73-41d4-8342-4e36487d0981

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx

@@ -3,10 +3,7 @@ import { IconComponent } from 'twenty-ui';
 import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
-import {
-  StyledHoverableMenuItemBase,
-  StyledMenuItemBase,
-} from '../internals/components/StyledMenuItemBase';
+import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
 import { MenuItemAccent } from '../types/MenuItemAccent';
 
 import { MenuItemIconButton } from './MenuItem';
@@ -24,6 +21,7 @@ export type MenuItemDraggableProps = {
   isDragDisabled?: boolean;
   isHoverDisabled?: boolean;
 };
+
 export const MenuItemDraggable = ({
   LeftIcon,
   accent = 'default',
@@ -34,22 +32,14 @@ export const MenuItemDraggable = ({
   className,
   isIconDisplayedOnHoverOnly = true,
   showGrip = false,
-  isHoverDisabled = false,
 }: MenuItemDraggableProps) => {
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
-  if (isHoverDisabled) {
-    return (
-      <StyledMenuItemBase accent={accent} isHoverBackgroundDisabled>
-        <MenuItemLeftContent
-          LeftIcon={LeftIcon}
-          text={text}
-          isDisabled={isDragDisabled}
-          showGrip={showGrip}
-        />
-      </StyledMenuItemBase>
-    );
-  }
+  const cursorType = showGrip
+    ? isDragDisabled
+      ? 'not-allowed'
+      : 'drag'
+    : 'default';
 
   return (
     <StyledHoverableMenuItemBase
@@ -57,6 +47,7 @@ export const MenuItemDraggable = ({
       accent={accent}
       className={className}
       isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
+      cursor={cursorType}
     >
       <MenuItemLeftContent
         LeftIcon={LeftIcon}

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import { isString } from '@sniptt/guards';
+import { ReactNode } from 'react';
 import {
   IconComponent,
   IconGripVertical,
@@ -34,13 +34,17 @@ export const MenuItemLeftContent = ({
     <StyledMenuItemLeftContent className={className}>
       {showGrip &&
         (isDisabled ? (
-          <IconGripVertical
-            size={theme.icon.size.md}
-            stroke={theme.icon.stroke.sm}
-            color={
-              isDisabled ? theme.font.color.extraLight : theme.font.color.light
-            }
-          />
+          <StyledDraggableItem>
+            <IconGripVertical
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+              color={
+                isDisabled
+                  ? theme.font.color.extraLight
+                  : theme.font.color.light
+              }
+            />
+          </StyledDraggableItem>
         ) : (
           <StyledDraggableItem>
             <IconGripVertical

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -106,10 +106,14 @@ export const StyledMenuItemRightContent = styled.div`
 
 export const StyledDraggableItem = styled.div`
   cursor: grab;
+
+  align-items: center;
+  display: flex;
 `;
 
 export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
   isIconDisplayedOnHoverOnly?: boolean;
+  cursor?: 'drag' | 'default' | 'not-allowed';
 }>`
   ${({ isIconDisplayedOnHoverOnly, theme }) =>
     isIconDisplayedOnHoverOnly &&
@@ -131,4 +135,15 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
   & .hoverable-buttons {
     transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease;
   }
+
+  cursor: ${({ cursor }) => {
+    switch (cursor) {
+      case 'drag':
+        return 'grab';
+      case 'not-allowed':
+        return 'not-allowed';
+      default:
+        return 'default';
+    }
+  }};
 `;