fix: Default View Font Color and Reordering (#7940)

This PR fixes issue #6114 
I removed the separate check for default item and add it into the
draggable list.

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

@@ -60,8 +60,6 @@ export const ViewPickerListContent = () => {
 
   const { getIcon } = useIcons();
 
-  const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX');
-
   const handleDragEnd = useCallback(
     (result: DropResult) => {
       if (!result.destination) return;
@@ -81,33 +79,29 @@ export const ViewPickerListContent = () => {
   return (
     <>
       <DropdownMenuItemsContainer>
-        {indexView && (
-          <MenuItemDraggable
-            key={indexView.id}
-            iconButtons={[
-              {
-                Icon: IconLock,
-              },
-            ].filter(isDefined)}
-            isIconDisplayedOnHoverOnly={false}
-            onClick={() => handleViewSelect(indexView.id)}
-            LeftIcon={getIcon(indexView.icon)}
-            text={indexView.name}
-            accent="placeholder"
-            isDragDisabled
-          />
-        )}
         <DraggableList
           onDragEnd={handleDragEnd}
-          draggableItems={viewsOnCurrentObject
+          draggableItems={viewsOnCurrentObject.map((view, index) => (
-            .filter((view) => indexView?.id !== view.id)
+            <DraggableItem
-            .map((view, index) => (
+              key={view.id}
-              <DraggableItem
+              draggableId={view.id}
-                key={view.id}
+              index={index}
-                draggableId={view.id}
+              isDragDisabled={viewsOnCurrentObject.length === 1}
-                index={index}
+              itemComponent={
-                isDragDisabled={viewsOnCurrentObject.length === 1}
+                view.key === 'INDEX' ? (
-                itemComponent={
+                  <MenuItemDraggable
+                    key={view.id}
+                    iconButtons={[
+                      {
+                        Icon: IconLock,
+                      },
+                    ].filter(isDefined)}
+                    isIconDisplayedOnHoverOnly={false}
+                    onClick={() => handleViewSelect(view.id)}
+                    LeftIcon={getIcon(view.icon)}
+                    text={view.name}
+                  />
+                ) : (
                   <MenuItemDraggable
                     key={view.id}
                     iconButtons={[
@@ -117,16 +111,15 @@ export const ViewPickerListContent = () => {
                           handleEditViewButtonClick(event, view.id),
                       },
                     ].filter(isDefined)}
-                    isIconDisplayedOnHoverOnly={
+                    isIconDisplayedOnHoverOnly={true}
-                      indexView?.id === view.id ? false : true
-                    }
                     onClick={() => handleViewSelect(view.id)}
                     LeftIcon={getIcon(view.icon)}
                     text={view.name}
                   />
-                }
+                )
-              />
+              }
-            ))}
+            />
+          ))}
         />
       </DropdownMenuItemsContainer>
       <DropdownMenuSeparator />