Fix 4363 modify kanban menu (#5337)

**Changes:**

- Changed -/+ to eye and eye off icons
- Changed menu width to 200px
- Created separate menu for hidden fields
- Added Edit Fields option to hidden fields menu
- Added test file MenuItemSelectTag (wasn't included in the issue)

As this is my first pr, feedback is very welcome!
**Note:** 
These changes cover most of #4363 . I left out the implementation of the
RightIcon in the "Hidden Fields" menu item.

---------

Co-authored-by: kiridarivaki <k.darivaki03@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx

@@ -20,6 +20,7 @@ export const RecordIndexOptionsDropdown = ({
     <Dropdown
       dropdownId={RECORD_INDEX_OPTIONS_DROPDOWN_ID}
       clickableComponent={<RecordIndexOptionsDropdownButton />}
+      dropdownMenuWidth={'200px'}
       dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
       dropdownOffset={{ y: 8 }}
       dropdownComponents={

packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx

@@ -1,10 +1,13 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Key } from 'ts-key-enum';
 import {
   IconBaselineDensitySmall,
   IconChevronLeft,
+  IconEyeOff,
   IconFileExport,
   IconFileImport,
+  IconSettings,
   IconTag,
 } from 'twenty-ui';
 
@@ -17,6 +20,8 @@ import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/opti
 import { useRecordIndexOptionsForTable } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForTable';
 import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
 import { useSpreadsheetRecordImport } from '@/object-record/spreadsheet-import/useSpreadsheetRecordImport';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -28,7 +33,7 @@ import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFiel
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewType } from '@/views/types/ViewType';
 
-type RecordIndexOptionsMenu = 'fields';
+type RecordIndexOptionsMenu = 'fields' | 'hiddenFields';
 
 type RecordIndexOptionsDropdownContentProps = {
   recordIndexId: string;
@@ -43,6 +48,8 @@ export const RecordIndexOptionsDropdownContent = ({
 }: RecordIndexOptionsDropdownContentProps) => {
   const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
 
+  const navigate = useNavigate();
+
   const { closeDropdown } = useDropdown(RECORD_INDEX_OPTIONS_DROPDOWN_ID);
 
   const [currentMenu, setCurrentMenu] = useState<
@@ -55,6 +62,10 @@ export const RecordIndexOptionsDropdownContent = ({
     setCurrentMenu(option);
   };
 
+  const handleEditClick = () => {
+    navigate(getSettingsPagePath(SettingsPath.Objects));
+  };
+
   useScopedHotkeys(
     [Key.Escape],
     () => {
@@ -142,20 +153,45 @@ export const RecordIndexOptionsDropdownContent = ({
             isDraggable
             onDragEnd={handleReorderFields}
             onVisibilityChange={handleChangeFieldVisibility}
+            showSubheader={false}
           />
+          <DropdownMenuSeparator />
+          <MenuItem
+            onClick={() => handleSelectMenu('hiddenFields')}
+            LeftIcon={IconEyeOff}
+            text="Hidden Fields"
+          />
+        </>
+      )}
+      {currentMenu === 'hiddenFields' && (
+        <>
+          <DropdownMenuHeader
+            StartIcon={IconChevronLeft}
+            onClick={() => setCurrentMenu('fields')}
+          >
+            Hidden Fields
+          </DropdownMenuHeader>
+          <DropdownMenuSeparator />
           {hiddenRecordFields.length > 0 && (
             <>
-              <DropdownMenuSeparator />
               <ViewFieldsVisibilityDropdownSection
                 title="Hidden"
                 fields={hiddenRecordFields}
                 isDraggable={false}
                 onVisibilityChange={handleChangeFieldVisibility}
+                showSubheader={false}
               />
             </>
           )}
+          <DropdownMenuSeparator />
+          <MenuItem
+            onClick={handleEditClick}
+            LeftIcon={IconSettings}
+            text="Edit Fields"
+          />
         </>
       )}
+
       {viewType === ViewType.Kanban && (
         <>
           <DropdownMenuSeparator />

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  CatalogDecorator,
+  CatalogDimension,
+  CatalogOptions,
+  CatalogStory,
+  ComponentDecorator,
+  ThemeColor,
+} from 'twenty-ui';
+
+import { MenuItemSelectTag } from '../MenuItemSelectTag';
+
+const meta: Meta<typeof MenuItemSelectTag> = {
+  title: 'UI/Navigation/MenuItem/MenuItemSelectTag',
+  component: MenuItemSelectTag,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MenuItemSelectTag>;
+
+export const Default: Story = {
+  args: {
+    selected: false,
+    onClick: undefined,
+    text: 'Item A',
+  },
+  argTypes: {
+    selected: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    onClick: {
+      control: false,
+    },
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: CatalogStory<Story, typeof MenuItemSelectTag> = {
+  args: {
+    text: 'Item A',
+  },
+  parameters: {
+    pseudo: {
+      hover: ['.hover'],
+      active: ['.pressed'],
+      focus: ['.focus'],
+    },
+    catalog: {
+      dimensions: [
+        {
+          name: 'color',
+          values: [
+            'green',
+            'turquoise',
+            'sky',
+            'blue',
+            'purple',
+            'pink',
+            'red',
+            'orange',
+            'yellow',
+            'gray',
+          ],
+          props: (color: ThemeColor) => ({ color }),
+        },
+        {
+          name: 'states',
+          values: ['default', 'hover', 'selected', 'hover+selected'],
+          props: (state: string) => {
+            switch (state) {
+              case 'default':
+                return {};
+              case 'hover':
+                return { className: 'hover' };
+              case 'selected':
+                return { selected: true };
+              case 'hover+selected':
+                return { className: 'hover', selected: true };
+              default:
+                return {};
+            }
+          },
+          labels: (state: string) => `State: ${state}`,
+        },
+      ] as CatalogDimension[],
+      options: {
+        elementContainer: { width: 200 },
+      } as CatalogOptions,
+    },
+  },
+  decorators: [CatalogDecorator],
+};

packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -7,9 +7,9 @@ import {
 } from '@hello-pangea/dnd';
 import {
   AppTooltip,
+  IconEye,
+  IconEyeOff,
   IconInfoCircle,
-  IconMinus,
-  IconPlus,
   useIcons,
 } from 'twenty-ui';
 
@@ -33,6 +33,7 @@ type ViewFieldsVisibilityDropdownSectionProps = {
     field: Omit<ColumnDefinition<FieldMetadata>, 'size' | 'position'>,
   ) => void;
   title: string;
+  showSubheader: boolean;
 };
 
 export const ViewFieldsVisibilityDropdownSection = ({
@@ -41,6 +42,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
   onDragEnd,
   onVisibilityChange,
   title,
+  showSubheader = true,
 }: ViewFieldsVisibilityDropdownSectionProps) => {
   const handleOnDrag = (result: DropResult, provided: ResponderProvided) => {
     onDragEnd?.(result, provided);
@@ -69,7 +71,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
       field.isLabelIdentifier
         ? null
         : {
-            Icon: field.isVisible ? IconMinus : IconPlus,
+            Icon: field.isVisible ? IconEyeOff : IconEye,
             onClick: () => onVisibilityChange(field),
           },
     ].filter(isDefined);
@@ -94,7 +96,9 @@ export const ViewFieldsVisibilityDropdownSection = ({
 
   return (
     <div ref={ref}>
-      <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
+      {showSubheader && (
+        <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
+      )}
       <DropdownMenuItemsContainer>
         {nonDraggableItems.map((field, fieldIndex) => (
           <MenuItem