Default View Font Color and Reordering

[Bonapara]

Current Behavior

The default view font color is tertiary. We cannot reorder the default view.

Desired Behavior

The text color should be primary, like other views' title color. It should be possible to reorder this view.

Ensure this edit doesn't change the color of the non-movable item in the "Options > Fields" menu.

[greptile-apps[bot]]

To address the issue:

1. Change Default View Font Color:

   • Update the NavigationDrawerItem component in /packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx.
   • Modify the StyledItem styled component to set the default font color to primary.

     const StyledItem = styled('div', {
     shouldForwardProp: (prop) =>
     !['active', 'danger', 'soon'].includes(prop) && isPropValid(prop),
     })<StyledItemProps>`
     color: ${(props) => {
     if (props.active === true) {
      return props.theme.font.color.primary;
     }
     if (props.danger === true) {
      return props.theme.color.red;
     }
     if (props.soon === true) {
      return props.theme.font.color.light;
     }
     return props.theme.font.color.primary; // Change from secondary to primary
     }};
     `;

2. Enable Reordering of Default View:

   • Ensure the RecordTableHeaderCell component in /packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx allows reordering.
   • Verify that the disableColumnResize logic does not prevent reordering for the default view.

     const disableColumnResize =
     column.isLabelIdentifier && isMobile && scrollLeft > 0;

   • Adjust the condition if necessary to allow reordering.

Ensure these changes do not affect the non-movable item in the "Options > Fields" menu.

References

/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx /packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx /packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx /packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/twentyhq/twenty/main) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

[Adithej]

Hi @Bonapara

Is this the desired behavior you are looking for? Or are you expecting the default view eg: All Companies to be draggable as well?

Text color issue has been rectified

https://github.com/twentyhq/twenty/assets/32978688/88aef3f8-c6a3-4956-a3df-5601334c13ce

[Bonapara]

Hi @Adithej, thanks for your work! I was indeed expecting the default view to be draggable too.

[Adithej]

Thanks @Bonapara

I am working on it but not that sure I will be able to, but still being optimistic. The default gets draggable but it goes back to the last position. I am not being able to find the root cause.

On ViewPickerListContent.tsx I have made these changes.

<DropdownMenuItemsContainer>
        <DraggableList
          onDragEnd={handleDragEnd}
          draggableItems={viewsOnCurrentObject.map(
            (view, index) => (
              <DraggableItem
                key={view.id}
                draggableId={view.id}
                index={index}
                isDragDisabled={viewsOnCurrentObject.length === 1}
                itemComponent={
                  <MenuItemDraggable
                    key={view.id}
                    iconButtons={indexView?.id === view.id ? 
                      [{
                        Icon: IconLock,
                      },]
                      :
                      [{
                        Icon: IconPencil,
                        onClick: (event: MouseEvent<HTMLButtonElement>) =>
                          handleEditViewButtonClick(event, view.id),
                      },]
                    .filter(isDefined)}
                    isIconDisplayedOnHoverOnly = {indexView?.id === view.id ? false : true}
                    onClick={() => handleViewSelect(view.id)}
                    LeftIcon={getIcon(view.icon)}
                    text={view.name}
                  />
                }
              />
            ),
          )}
        />
      </DropdownMenuItemsContainer>

And the handleDragEnd seems okay but I belive the state is not getting upaded.

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 });
        }
      });
      // console.log("view before", viewsOnCurrentObject)
    },
    [updateView, viewsOnCurrentObject],
  );

It would be helpful if I could find any leads that may help me fix this

https://github.com/twentyhq/twenty/assets/32978688/7413cf0a-4705-4cd7-b20e-e24b0b7968ab

[Bonapara]

Perhaps Lucas Bordeaux has some thoughts for you!

[Adithej]

Thanks @Bonapara and @lucasbordeau if you have some thoughts about it , will be wonderful.