AAU I want to re-order my views with drag & drop

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

@@ -17,6 +17,7 @@ export type MenuItemDraggableProps = {
   text: string;
   isDragDisabled?: boolean;
   className?: string;
+  isIconDisplayedOnHoverOnly?: boolean;
 };
 export const MenuItemDraggable = ({
   LeftIcon,
@@ -27,6 +28,7 @@ export const MenuItemDraggable = ({
   text,
   isDragDisabled = false,
   className,
+  isIconDisplayedOnHoverOnly = true,
 }: MenuItemDraggableProps) => {
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
@@ -36,6 +38,7 @@ export const MenuItemDraggable = ({
       accent={accent}
       className={className}
       isMenuOpen={!!isTooltipOpen}
+      isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
     >
       <MenuItemLeftContent
         LeftIcon={LeftIcon}

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx

@@ -1,17 +1,22 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import styled from '@emotion/styled';
+import { DropResult } from '@hello-pangea/dnd';
 import { useSetRecoilState } from 'recoil';
 import { IconLock, IconPencil, IconPlus, useIcons } from 'twenty-ui';
 
+import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
+import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useHandleViews } from '@/views/hooks/useHandleViews';
 import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
 import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
+import { moveArrayItem } from '~/utils/array/moveArrayItem';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledBoldDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
@@ -33,6 +38,8 @@ export const ViewPickerListContent = () => {
 
   const { closeDropdown } = useDropdown(VIEW_PICKER_DROPDOWN_ID);
 
+  const { updateView } = useHandleViews();
+
   const handleViewSelect = (viewId: string) => {
     selectView(viewId);
     closeDropdown();
@@ -56,29 +63,61 @@ export const ViewPickerListContent = () => {
 
   const { getIcon } = useIcons();
 
+  const handleDragEnd = useCallback(
+    (result: DropResult) => {
+      if (!result.destination) return;
+
+      moveArrayItem(viewsOnCurrentObject, {
+        fromIndex: result.source.index,
+        toIndex: result.destination.index,
+      }).forEach((view, index) => {
+        if (view.position !== index) {
+          updateView({ ...view, position: index });
+        }
+      });
+    },
+    [updateView, viewsOnCurrentObject],
+  );
+
+  const getSortedViews = () => {
+    return viewsOnCurrentObject.sort((a, b) => a.position - b.position);
+  };
+  const sortedViews = getSortedViews();
+
   return (
     <>
       <DropdownMenuItemsContainer>
-        {viewsOnCurrentObject.map((view) => (
-          <MenuItem
-            key={view.id}
-            iconButtons={[
-              view.key !== 'INDEX'
-                ? {
-                    Icon: IconPencil,
-                    onClick: (event: MouseEvent<HTMLButtonElement>) =>
-                      handleEditViewButtonClick(event, view.id),
-                  }
-                : {
-                    Icon: IconLock,
-                  },
-            ].filter(isDefined)}
-            isIconDisplayedOnHoverOnly={view.key !== 'INDEX'}
-            onClick={() => handleViewSelect(view.id)}
-            LeftIcon={getIcon(view.icon)}
-            text={view.name}
-          />
-        ))}
+        <DraggableList
+          onDragEnd={handleDragEnd}
+          draggableItems={sortedViews.map((view, index) => (
+            <DraggableItem
+              key={view.id}
+              draggableId={view.id}
+              index={index}
+              isDragDisabled={viewsOnCurrentObject.length === 1}
+              itemComponent={
+                <MenuItemDraggable
+                  key={view.id}
+                  iconButtons={[
+                    view.key !== 'INDEX'
+                      ? {
+                          Icon: IconPencil,
+                          onClick: (event: MouseEvent<HTMLButtonElement>) =>
+                            handleEditViewButtonClick(event, view.id),
+                        }
+                      : {
+                          Icon: IconLock,
+                        },
+                  ].filter(isDefined)}
+                  isIconDisplayedOnHoverOnly={view.key !== 'INDEX'}
+                  onClick={() => handleViewSelect(view.id)}
+                  LeftIcon={getIcon(view.icon)}
+                  text={view.name}
+                />
+              }
+            />
+          ))}
+        />
       </DropdownMenuItemsContainer>
       <DropdownMenuSeparator />
       <StyledBoldDropdownMenuItemsContainer>