Tabs sidepanel settings on dashboards (#15454)

question -- should we have confirmation modal on delete -- if yes -- should it appear on save -- or on delete? figma - https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=79469-817497&t=5gFTRiI5f8nPyzc6-0 Note - Figma has a new side panel header, which is unavailable for now, so I used the existing one In a follow-up, we could even have icons for tabs -- would be cool -- and an icon picker for the icons? followups which could be addressed in separate PRs - - ~~tabs being edited state (select state?) -- this would have blue border around tab~~ done - add icons on tabs -- need to update the entity to add icon -- and set a default (dashboard) -- at least - icon picker in the sidepanel header closes - https://discord.com/channels/1130383047699738754/1430204556884836532 video QA https://github.com/user-attachments/assets/a4ad4b93-911d-46ce-9b68-347fd48fe933
2025-10-30 18:45:31 +05:30
parent f367bd6072
commit 369b1b19af
22 changed files with 602 additions and 23 deletions
@@ -7,14 +7,19 @@ import { useCreatePageLayoutTab } from '@/page-layout/hooks/useCreatePageLayoutT
 import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
 import { useReorderPageLayoutTabs } from '@/page-layout/hooks/useReorderPageLayoutTabs';
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
+import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
 import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
 import { getTabsByDisplayMode } from '@/page-layout/utils/getTabsByDisplayMode';
+import { sortTabsByPosition } from '@/page-layout/utils/sortTabsByPosition';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { ShowPageContainer } from '@/ui/layout/page/components/ShowPageContainer';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';

@@ -57,8 +62,20 @@ export const PageLayoutRendererContent = () => {

  const { createPageLayoutTab } = useCreatePageLayoutTab(currentPageLayout?.id);
  const { reorderTabs } = useReorderPageLayoutTabs(currentPageLayout?.id ?? '');
+  const setTabSettingsOpenTabId = useSetRecoilComponentState(
+    pageLayoutTabSettingsOpenTabIdComponentState,
+  );
+  const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();

-  const handleAddTab = isPageLayoutInEditMode ? createPageLayoutTab : undefined;
+  const handleAddTab = isPageLayoutInEditMode
+    ? () => {
+        const newTabId = createPageLayoutTab('Untitled');
+        setTabSettingsOpenTabId(newTabId);
+        navigatePageLayoutCommandMenu({
+          commandMenuPage: CommandMenuPages.PageLayoutTabSettings,
+        });
+      }
+    : undefined;

  const isMobile = useIsMobile();

@@ -76,9 +93,7 @@ export const PageLayoutRendererContent = () => {
    currentPageLayout.id,
  );

-  const sortedTabs = [...tabsToRenderInTabList].sort(
-    (a, b) => a.position - b.position,
-  );
+  const sortedTabs = sortTabsByPosition(tabsToRenderInTabList);

  return (
    <ShowPageContainer>
@@ -27,11 +27,18 @@ import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useC
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';

+import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/PageLayoutTabListDroppableIds';
 import { PageLayoutTabListReorderableOverflowDropdown } from '@/page-layout/components/PageLayoutTabListReorderableOverflowDropdown';
 import { PageLayoutTabListStaticOverflowDropdown } from '@/page-layout/components/PageLayoutTabListStaticOverflowDropdown';
 import { PageLayoutTabListVisibleTabs } from '@/page-layout/components/PageLayoutTabListVisibleTabs';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
+import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
 import { pageLayoutTabListCurrentDragDroppableIdComponentState } from '@/page-layout/states/pageLayoutTabListCurrentDragDroppableIdComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { isDefined } from 'twenty-shared/utils';

 const StyledContainer = styled.div`
@@ -180,6 +187,57 @@ export const PageLayoutTabList = ({
    [onReorder, setIsTabDragging, toggleClickOutside, openDropdown, dropdownId],
  );

+  const isPageLayoutInEditMode = useRecoilComponentValue(
+    isPageLayoutInEditModeComponentState,
+  );
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+  );
+  const setTabSettingsOpenTabId = useSetRecoilComponentState(
+    pageLayoutTabSettingsOpenTabIdComponentState,
+    pageLayoutId,
+  );
+  const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
+
+  const openTabSettings = useCallback(
+    (tabId: string) => {
+      setTabSettingsOpenTabId(tabId);
+      navigatePageLayoutCommandMenu({
+        commandMenuPage: CommandMenuPages.PageLayoutTabSettings,
+      });
+    },
+    [setTabSettingsOpenTabId, navigatePageLayoutCommandMenu],
+  );
+
+  const handleSelectTab = useCallback(
+    (tabId: string) => {
+      if (isPageLayoutInEditMode && activeTabId === tabId) {
+        openTabSettings(tabId);
+        return;
+      }
+      selectTab(tabId);
+    },
+    [isPageLayoutInEditMode, activeTabId, openTabSettings, selectTab],
+  );
+
+  const handleSelectTabFromDropdown = useCallback(
+    (tabId: string) => {
+      if (isPageLayoutInEditMode && activeTabId === tabId) {
+        openTabSettings(tabId);
+        closeOverflowDropdown();
+        return;
+      }
+      selectTabFromDropdown(tabId);
+    },
+    [
+      isPageLayoutInEditMode,
+      activeTabId,
+      openTabSettings,
+      closeOverflowDropdown,
+      selectTabFromDropdown,
+    ],
+  );
+
  if (visibleTabs.length === 0) {
    return null;
  }
@@ -232,7 +290,7 @@ export const PageLayoutTabList = ({
                behaveAsLinks={behaveAsLinks}
                loading={loading}
                onChangeTab={onChangeTab}
-                onSelectTab={selectTab}
+                onSelectTab={handleSelectTab}
                canReorder={canReorderTabs}
              />

@@ -244,7 +302,7 @@ export const PageLayoutTabList = ({
                  isActiveTabHidden={isActiveTabHidden}
                  activeTabId={activeTabId || ''}
                  loading={loading}
-                  onSelect={selectTabFromDropdown}
+                  onSelect={handleSelectTabFromDropdown}
                  visibleTabCount={visibleTabCount}
                  onClose={closeOverflowDropdown}
                />
@@ -271,7 +329,7 @@ export const PageLayoutTabList = ({
              behaveAsLinks={behaveAsLinks}
              loading={loading}
              onChangeTab={onChangeTab}
-              onSelectTab={selectTab}
+              onSelectTab={handleSelectTab}
              canReorder={canReorderTabs}
            />
            {shouldRenderStaticDropdown && (
@@ -282,7 +340,7 @@ export const PageLayoutTabList = ({
                isActiveTabHidden={isActiveTabHidden}
                activeTabId={activeTabId || ''}
                loading={loading}
-                onSelect={selectTabFromDropdown}
+                onSelect={handleSelectTabFromDropdown}
                onClose={closeOverflowDropdown}
              />
            )}
@@ -8,21 +8,26 @@ import {
  Droppable,
 } from '@hello-pangea/dnd';

+import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/PageLayoutTabListDroppableIds';
 import { PageLayoutTabListDroppableMoreButton } from '@/page-layout/components/PageLayoutTabListDroppableMoreButton';
+import { PageLayoutTabMenuItemSelectAvatar } from '@/page-layout/components/PageLayoutTabMenuItemSelectAvatar';
 import { PageLayoutTabRenderClone } from '@/page-layout/components/PageLayoutTabRenderClone';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
 import { isPageLayoutTabDraggingComponentState } from '@/page-layout/states/isPageLayoutTabDraggingComponentState';
+import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar';
 import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import { useContext } from 'react';
-import { MenuItemSelectAvatar } from 'twenty-ui/navigation';

 const StyledOverflowDropdownListDraggableWrapper = styled.div`
  display: flex;
@@ -60,6 +65,15 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
  const context = useContext(TabListComponentInstanceContext);
  const instanceId = context?.instanceId;

+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+  );
+
+  const isPageLayoutInEditMode = useRecoilComponentValue(
+    isPageLayoutInEditModeComponentState,
+    pageLayoutId,
+  );
+
  const isTabDragging = useRecoilComponentValue(
    isPageLayoutTabDraggingComponentState,
    instanceId,
@@ -70,6 +84,13 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
    instanceId,
  );

+  const setTabSettingsOpenTabId = useSetRecoilComponentState(
+    pageLayoutTabSettingsOpenTabIdComponentState,
+    pageLayoutId,
+  );
+
+  const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
+
  const handleClose = () => {
    if (!isTabDragging) {
      onClose();
@@ -82,6 +103,14 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
    handleClose();
  };

+  const handleEditClick = (tabId: string) => {
+    setTabSettingsOpenTabId(tabId);
+    navigatePageLayoutCommandMenu({
+      commandMenuPage: CommandMenuPages.PageLayoutTabSettings,
+    });
+    onClose();
+  };
+
  return (
    <Dropdown
      dropdownId={dropdownId}
@@ -163,9 +192,8 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
                                  theme.spacingMultiplicator * 2,
                              }}
                            >
-                              <MenuItemSelectAvatar
-                                text={tab.title}
-                                avatar={<TabAvatar tab={tab} />}
+                              <PageLayoutTabMenuItemSelectAvatar
+                                tab={tab}
                                selected={tab.id === activeTabId}
                                onClick={
                                  draggableSnapshot.isDragging
@@ -173,6 +201,8 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
                                    : () => handleTabSelect(tab.id)
                                }
                                disabled={disabled}
+                                showEditButton={isPageLayoutInEditMode}
+                                onEditClick={handleEditClick}
                              />
                            </div>
                          </StyledOverflowDropdownListDraggableWrapper>
@@ -1,6 +1,10 @@
 import { Draggable } from '@hello-pangea/dnd';

+import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { StyledTabContainer, TabContent } from 'twenty-ui/input';

 type PageLayoutTabListReorderableTabProps = {
@@ -11,6 +15,15 @@ type PageLayoutTabListReorderableTabProps = {
  onSelect: () => void;
 };

+const StyledTabContent = styled(TabContent)<{ isBeingEdited: boolean }>`
+  ${({ isBeingEdited, theme }) =>
+    isBeingEdited &&
+    css`
+      border: 1px solid ${theme.color.blue};
+      border-radius: ${theme.border.radius.sm};
+    `}
+`;
+
 export const PageLayoutTabListReorderableTab = ({
  tab,
  index,
@@ -18,6 +31,11 @@ export const PageLayoutTabListReorderableTab = ({
  disabled,
  onSelect,
 }: PageLayoutTabListReorderableTabProps) => {
+  const tabSettingsOpenTabId = useRecoilComponentValue(
+    pageLayoutTabSettingsOpenTabIdComponentState,
+  );
+
+  const isSettingsOpenForThisTab = tabSettingsOpenTabId === tab.id;
  return (
    <Draggable draggableId={tab.id} index={index} isDragDisabled={disabled}>
      {(draggableProvided, draggableSnapshot) => (
@@ -35,7 +53,7 @@ export const PageLayoutTabListReorderableTab = ({
            cursor: draggableSnapshot.isDragging ? 'grabbing' : 'pointer',
          }}
        >
-          <TabContent
+          <StyledTabContent
            id={tab.id}
            active={isActive}
            disabled={disabled}
@@ -43,6 +61,7 @@ export const PageLayoutTabListReorderableTab = ({
            title={tab.title}
            logo={tab.logo}
            pill={tab.pill}
+            isBeingEdited={isSettingsOpenForThisTab}
          />
        </StyledTabContainer>
      )}
@@ -34,10 +34,6 @@ const StyledTabContainer = styled.div`
  > *:not(:last-child) {
    margin-right: ${TAB_LIST_GAP}px;
  }
-
-  // > div[data-rbd-placeholder-context-id] {
-    margin-right: ${TAB_LIST_GAP}px;
-  }
 `;

 export const PageLayoutTabListVisibleTabs = ({
@@ -0,0 +1,97 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { type MouseEvent, useState } from 'react';
+
+import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar';
+import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
+import { IconPencil } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import {
+  StyledHoverableMenuItemBase,
+  StyledMenuItemIconCheck,
+  StyledMenuItemLabel,
+  StyledMenuItemLeftContent,
+} from 'twenty-ui/navigation';
+
+const StyledTextContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  gap: ${({ theme }) => theme.spacing(1)};
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+const StyledRightContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+type PageLayoutTabMenuItemSelectAvatarProps = {
+  tab: SingleTabProps;
+  selected: boolean;
+  onClick?: (event?: MouseEvent) => void;
+  disabled?: boolean;
+  showEditButton?: boolean;
+  onEditClick?: (tabId: string) => void;
+  testId?: string;
+};
+
+export const PageLayoutTabMenuItemSelectAvatar = ({
+  tab,
+  selected,
+  onClick,
+  disabled,
+  showEditButton = false,
+  onEditClick,
+  testId,
+}: PageLayoutTabMenuItemSelectAvatarProps) => {
+  const theme = useTheme();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleEditClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onEditClick?.(tab.id);
+  };
+
+  return (
+    <StyledHoverableMenuItemBase
+      onClick={onClick}
+      disabled={disabled}
+      data-testid={testId}
+      role="option"
+      aria-selected={selected}
+      aria-disabled={disabled}
+      isIconDisplayedOnHoverOnly={showEditButton}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <StyledMenuItemLeftContent>
+        <TabAvatar tab={tab} />
+        <StyledTextContainer>
+          <StyledMenuItemLabel>{tab.title}</StyledMenuItemLabel>
+        </StyledTextContainer>
+      </StyledMenuItemLeftContent>
+
+      <StyledRightContent>
+        {selected && !isHovered && (
+          <StyledMenuItemIconCheck size={theme.icon.size.md} />
+        )}
+
+        {isHovered && showEditButton && (
+          <div className="hoverable-buttons">
+            <LightIconButton
+              Icon={IconPencil}
+              size="small"
+              accent="tertiary"
+              onClick={handleEditClick}
+            />
+          </div>
+        )}
+      </StyledRightContent>
+    </StyledHoverableMenuItemBase>
+  );
+};