From 100d4f7f4209a308ed91e61c16c2beff138b767c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 17 Dec 2025 17:42:58 +0100
Subject: [PATCH] [DASHBOARDS] Hide tab menu items instead of disabling them
 (#16629)

## Before

<img width="818" height="1052" alt="CleanShot_2025-12-15_at_14 29 302x"
src="https://github.com/user-attachments/assets/5eceefce-559d-4710-8fa7-118ca32a4dc7"
/>

## After


https://github.com/user-attachments/assets/b6559600-d7cd-47a8-9ef7-e9c638637cb0
---
 .../CommandMenuPageLayoutTabSettings.tsx      | 101 +++++++++---------
 1 file changed, 53 insertions(+), 48 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutTabSettings.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutTabSettings.tsx
index cf4285f9dc..45ed8d344a 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutTabSettings.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutTabSettings.tsx
@@ -48,49 +48,53 @@ export const CommandMenuPageLayoutTabSettings = () => {
   const currentIndex = tabsSorted.findIndex((t) => t.id === openTabId);
   if (currentIndex < 0) return null;
   const tab = tabsSorted[currentIndex];
-  const disableMoveLeft = currentIndex <= 0;
-  const disableMoveRight = currentIndex >= tabsSorted.length - 1;
-  const disableDelete = tabsSorted.length <= 1;
+  const canMoveLeft = currentIndex > 0;
+  const canMoveRight = currentIndex < tabsSorted.length - 1;
+  const canDelete = tabsSorted.length > 1;
 
   const handleDelete = () => {
-    if (!disableDelete) {
-      deleteTab(tab.id);
-      setOpenTabId(null);
-      closeCommandMenu();
-    }
+    deleteTab(tab.id);
+    setOpenTabId(null);
+    closeCommandMenu();
   };
 
+  const selectableItemIds = [
+    ...(canMoveLeft ? [TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_LEFT] : []),
+    ...(canMoveRight ? [TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_RIGHT] : []),
+    TAB_SETTINGS_SELECTABLE_ITEM_IDS.DUPLICATE,
+    ...(canDelete ? [TAB_SETTINGS_SELECTABLE_ITEM_IDS.DELETE] : []),
+  ];
+
   return (
     <>
-      <CommandMenuList
-        commandGroups={[]}
-        selectableItemIds={Object.values(TAB_SETTINGS_SELECTABLE_ITEM_IDS)}
-      >
+      <CommandMenuList commandGroups={[]} selectableItemIds={selectableItemIds}>
         <CommandGroup heading={t`Settings`}>
-          <SelectableListItem
-            itemId={TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_LEFT}
-            onEnter={() => moveLeft(tab.id)}
-          >
-            <CommandMenuItem
-              id={TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_LEFT}
-              Icon={IconChevronLeft}
-              label={t`Move left`}
-              onClick={() => moveLeft(tab.id)}
-              disabled={disableMoveLeft}
-            />
-          </SelectableListItem>
-          <SelectableListItem
-            itemId={TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_RIGHT}
-            onEnter={() => moveRight(tab.id)}
-          >
-            <CommandMenuItem
-              id={TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_RIGHT}
-              Icon={IconChevronRight}
-              label={t`Move right`}
-              onClick={() => moveRight(tab.id)}
-              disabled={disableMoveRight}
-            />
-          </SelectableListItem>
+          {canMoveLeft && (
+            <SelectableListItem
+              itemId={TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_LEFT}
+              onEnter={() => moveLeft(tab.id)}
+            >
+              <CommandMenuItem
+                id={TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_LEFT}
+                Icon={IconChevronLeft}
+                label={t`Move left`}
+                onClick={() => moveLeft(tab.id)}
+              />
+            </SelectableListItem>
+          )}
+          {canMoveRight && (
+            <SelectableListItem
+              itemId={TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_RIGHT}
+              onEnter={() => moveRight(tab.id)}
+            >
+              <CommandMenuItem
+                id={TAB_SETTINGS_SELECTABLE_ITEM_IDS.MOVE_RIGHT}
+                Icon={IconChevronRight}
+                label={t`Move right`}
+                onClick={() => moveRight(tab.id)}
+              />
+            </SelectableListItem>
+          )}
           <SelectableListItem
             itemId={TAB_SETTINGS_SELECTABLE_ITEM_IDS.DUPLICATE}
             onEnter={() => duplicateTab(tab.id)}
@@ -102,18 +106,19 @@ export const CommandMenuPageLayoutTabSettings = () => {
               onClick={() => duplicateTab(tab.id)}
             />
           </SelectableListItem>
-          <SelectableListItem
-            itemId={TAB_SETTINGS_SELECTABLE_ITEM_IDS.DELETE}
-            onEnter={handleDelete}
-          >
-            <CommandMenuItem
-              id={TAB_SETTINGS_SELECTABLE_ITEM_IDS.DELETE}
-              Icon={IconTrash}
-              label={t`Delete`}
-              onClick={handleDelete}
-              disabled={disableDelete}
-            />
-          </SelectableListItem>
+          {canDelete && (
+            <SelectableListItem
+              itemId={TAB_SETTINGS_SELECTABLE_ITEM_IDS.DELETE}
+              onEnter={handleDelete}
+            >
+              <CommandMenuItem
+                id={TAB_SETTINGS_SELECTABLE_ITEM_IDS.DELETE}
+                Icon={IconTrash}
+                label={t`Delete`}
+                onClick={handleDelete}
+              />
+            </SelectableListItem>
+          )}
         </CommandGroup>
       </CommandMenuList>
     </>