From 45b3992784af43a606962a92cd5268eb356897d6 Mon Sep 17 00:00:00 2001
From: Ngan Phan <jill01009@gmail.com>
Date: Wed, 23 Oct 2024 06:44:17 -0700
Subject: [PATCH] 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.
---
 .../components/ViewPickerListContent.tsx      | 59 ++++++++-----------
 1 file changed, 26 insertions(+), 33 deletions(-)

diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
index 80d3f329a..5463bf584 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
+++ b/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
-            .filter((view) => indexView?.id !== view.id)
-            .map((view, index) => (
-              <DraggableItem
-                key={view.id}
-                draggableId={view.id}
-                index={index}
-                isDragDisabled={viewsOnCurrentObject.length === 1}
-                itemComponent={
+          draggableItems={viewsOnCurrentObject.map((view, index) => (
+            <DraggableItem
+              key={view.id}
+              draggableId={view.id}
+              index={index}
+              isDragDisabled={viewsOnCurrentObject.length === 1}
+              itemComponent={
+                view.key === 'INDEX' ? (
+                  <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={
-                      indexView?.id === view.id ? false : true
-                    }
+                    isIconDisplayedOnHoverOnly={true}
                     onClick={() => handleViewSelect(view.id)}
                     LeftIcon={getIcon(view.icon)}
                     text={view.name}
                   />
-                }
-              />
-            ))}
+                )
+              }
+            />
+          ))}
         />
       </DropdownMenuItemsContainer>
       <DropdownMenuSeparator />