Hide page layout tab bar when there are less than two tabs to display (#15385)

- DIsplay the tab bar only if more than 1 tabs can be displayed
- Remove the selfDisplayMode feature: the first tab is now considered to
be the pinned tab on record pages


https://github.com/user-attachments/assets/3f61931d-fde4-4065-b646-5b3a7bdebcc0

packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx

@@ -2,6 +2,7 @@ import { PageLayoutContent } from '@/page-layout/components/PageLayoutContent';
 import { PageLayoutLeftPanel } from '@/page-layout/components/PageLayoutLeftPanel';
 import { PageLayoutTabHeader } from '@/page-layout/components/PageLayoutTabHeader';
 import { PageLayoutTabList } from '@/page-layout/components/PageLayoutTabList';
+import { PageLayoutTabListEffect } from '@/page-layout/components/PageLayoutTabListEffect';
 import { useCreatePageLayoutTab } from '@/page-layout/hooks/useCreatePageLayoutTab';
 import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
 import { useReorderPageLayoutTabs } from '@/page-layout/hooks/useReorderPageLayoutTabs';
@@ -35,7 +36,7 @@ const StyledShowPageRightContainer = styled.div`
   overflow: auto;
 `;
 
-const StyledTabList = styled(PageLayoutTabList)`
+const StyledPageLayoutTabList = styled(PageLayoutTabList)`
   padding-left: ${({ theme }) => theme.spacing(2)};
 `;
 
@@ -87,14 +88,21 @@ export const PageLayoutRendererContent = () => {
 
       <StyledShowPageRightContainer>
         <StyledTabsAndDashboardContainer>
-          <StyledTabList
+          <PageLayoutTabListEffect
             tabs={sortedTabs}
-            behaveAsLinks={false}
             componentInstanceId={tabListInstanceId}
-            onAddTab={handleAddTab}
-            isReorderEnabled={isPageLayoutInEditMode}
-            onReorder={isPageLayoutInEditMode ? reorderTabs : undefined}
           />
+          {(sortedTabs.length > 1 || isPageLayoutInEditMode) && (
+            <StyledPageLayoutTabList
+              tabs={sortedTabs}
+              behaveAsLinks={false}
+              componentInstanceId={tabListInstanceId}
+              onAddTab={handleAddTab}
+              isReorderEnabled={isPageLayoutInEditMode}
+              onReorder={isPageLayoutInEditMode ? reorderTabs : undefined}
+            />
+          )}
+
           <PageLayoutTabHeader />
           <StyledScrollWrapper
             componentInstanceId={`scroll-wrapper-page-layout-${currentPageLayout.id}`}

packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx

@@ -7,7 +7,7 @@ import {
   type OnDragUpdateResponder,
   type ResponderProvided,
 } from '@hello-pangea/dnd';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { IconPlus } from 'twenty-ui/display';
 import { IconButton } from 'twenty-ui/input';
@@ -86,9 +86,6 @@ export const PageLayoutTabList = ({
     componentInstanceId,
   );
 
-  const activeTabExists = visibleTabs.some((tab) => tab.id === activeTabId);
-  const initialActiveTabId = activeTabExists ? activeTabId : visibleTabs[0]?.id;
-
   const {
     visibleTabCount,
     hiddenTabs,
@@ -118,11 +115,6 @@ export const PageLayoutTabList = ({
     return hiddenTabs.some((tab) => tab.id === activeTabId);
   }, [hasHiddenTabs, hiddenTabs, activeTabId]);
 
-  useEffect(() => {
-    setActiveTabId(initialActiveTabId);
-    onChangeTab?.(initialActiveTabId || '');
-  }, [initialActiveTabId, setActiveTabId, onChangeTab]);
-
   const selectTab = useCallback(
     (tabId: string) => {
       setActiveTabId(tabId);

packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListEffect.tsx

@@ -0,0 +1,32 @@
+import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { type TabListProps } from '@/ui/layout/tab-list/types/TabListProps';
+import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useEffect } from 'react';
+
+type PageLayoutTabListEffectProps = Pick<
+  TabListProps,
+  'componentInstanceId' | 'tabs' | 'onChangeTab'
+>;
+
+export const PageLayoutTabListEffect = ({
+  tabs,
+  onChangeTab,
+  componentInstanceId,
+}: PageLayoutTabListEffectProps) => {
+  const [activeTabId, setActiveTabId] = useRecoilComponentState(
+    activeTabIdComponentState,
+    componentInstanceId,
+  );
+
+  const visibleTabs = tabs.filter((tab) => !tab.hide);
+
+  const activeTabExists = visibleTabs.some((tab) => tab.id === activeTabId);
+  const initialActiveTabId = activeTabExists ? activeTabId : visibleTabs[0]?.id;
+
+  useEffect(() => {
+    setActiveTabId(initialActiveTabId);
+    onChangeTab?.(initialActiveTabId || '');
+  }, [initialActiveTabId, onChangeTab, setActiveTabId]);
+
+  return null;
+};

packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutTabList.stories.tsx

@@ -9,6 +9,7 @@ import { ComponentWithRouterDecorator } from 'twenty-ui/testing';
 import { calculateNewPosition } from '@/favorites/utils/calculateNewPosition';
 import { PageLayoutTabList } from '@/page-layout/components/PageLayoutTabList';
 import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/PageLayoutTabListDroppableIds';
+import { PageLayoutTabListEffect } from '@/page-layout/components/PageLayoutTabListEffect';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 
@@ -117,6 +118,11 @@ const PageLayoutTabListPlayground = ({
 
   return (
     <StyledContainer>
+      <PageLayoutTabListEffect
+        tabs={sortedTabs}
+        componentInstanceId="page-layout-tab-list-story"
+      />
+
       <PageLayoutTabList
         tabs={sortedTabs}
         componentInstanceId="page-layout-tab-list-story"