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 />