Chore: Improve dropdown draggable list (#1738)

* draggable menu item component

* Menu item isDragged prop removed

* Droppable list component

* Draggablee item component

* Drag and drop use refactor

* lint fix

* isDragDisabled check on DraggableItem

* revert changes on non visibility items

* MenuItemDraggable stroybook

* DraggableItem storybook

* lint fix

* lint fix

* BoardColumnMenu css fix

* showGrip prop addition

* isDragged css fix

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

@@ -0,0 +1,52 @@
+import { FloatingIconButtonGroup } from '@/ui/button/components/FloatingIconButtonGroup';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
+import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
+import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
+import { MenuItemAccent } from '../types/MenuItemAccent';
+
+import { MenuItemIconButton } from './MenuItem';
+
+export type MenuItemDraggableProps = {
+  key: string;
+  LeftIcon: IconComponent | undefined;
+  accent?: MenuItemAccent;
+  iconButtons?: MenuItemIconButton[];
+  onClick?: () => void;
+  text: string;
+  isDragDisabled?: boolean;
+  className?: string;
+};
+export const MenuItemDraggable = ({
+  key,
+  LeftIcon,
+  accent = 'default',
+  iconButtons,
+  onClick,
+  text,
+  isDragDisabled = false,
+  className,
+}: MenuItemDraggableProps) => {
+  const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
+
+  return (
+    <StyledHoverableMenuItemBase
+      data-testid={key ?? undefined}
+      onClick={onClick}
+      accent={accent}
+      className={className}
+    >
+      <MenuItemLeftContent
+        LeftIcon={LeftIcon}
+        text={text}
+        key={key}
+        showGrip={!isDragDisabled}
+      />
+      <div className="hoverable-buttons">
+        {showIconButtons && (
+          <FloatingIconButtonGroup iconButtons={iconButtons} />
+        )}
+      </div>
+    </StyledHoverableMenuItemBase>
+  );
+};