[Page Layout] - Review Refactor (#14348)

addressing the review on
https://github.com/twentyhq/twenty/pull/14318#pullrequestreview-3191930203

packages/twenty-front/src/modules/ui/layout/tab-list/components/__stories__/Tablist.stories.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { type Meta, type StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import {
   IconCalendar,
   IconCheckbox,
@@ -11,6 +12,8 @@ import {
 } from 'twenty-ui/display';
 import { ComponentWithRouterDecorator } from 'twenty-ui/testing';
 import { TabList } from '../TabList';
+import { type TabListProps } from '../../types/TabListProps';
+import { type SingleTabProps } from '../../types/SingleTabProps';
 
 const tabs = [
   { id: 'general', title: 'General', logo: 'https://picsum.photos/200' },
@@ -80,3 +83,72 @@ export const Default: Story = {
     </StyledInteractiveContainer>
   ),
 };
+
+type TabListWithAddProps = Pick<
+  TabListProps,
+  'componentInstanceId' | 'loading' | 'isInRightDrawer' | 'className'
+> & {
+  initialTabs: SingleTabProps[];
+};
+
+const TabListWithAdd = ({
+  componentInstanceId,
+  loading,
+  isInRightDrawer,
+  className,
+  initialTabs,
+}: TabListWithAddProps) => {
+  const [currentTabs, setCurrentTabs] = useState<SingleTabProps[]>(initialTabs);
+  const [nextTabId, setNextTabId] = useState(initialTabs.length + 1);
+
+  const handleAddTab = () => {
+    const newTab: SingleTabProps = {
+      id: `new-tab-${nextTabId}`,
+      title: `New Tab ${nextTabId}`,
+      Icon: IconCheckbox,
+    };
+    setCurrentTabs([...currentTabs, newTab]);
+    setNextTabId(nextTabId + 1);
+  };
+
+  return (
+    <StyledInteractiveContainer>
+      <p>
+        <strong>Click the + button to add new tabs!</strong>
+      </p>
+      <TabList
+        tabs={currentTabs}
+        componentInstanceId={componentInstanceId}
+        loading={loading}
+        behaveAsLinks={false}
+        isInRightDrawer={isInRightDrawer}
+        className={className}
+        onAddTab={handleAddTab}
+      />
+    </StyledInteractiveContainer>
+  );
+};
+
+export const WithAddTab: Story = {
+  args: {
+    componentInstanceId: 'tabs-with-add',
+    tabs: tabs.slice(0, 3),
+  },
+  render: (args) => (
+    <TabListWithAdd
+      componentInstanceId={args.componentInstanceId}
+      loading={args.loading}
+      isInRightDrawer={args.isInRightDrawer}
+      className={args.className}
+      initialTabs={args.tabs}
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TabList with the ability to add new tabs dynamically using the onAddTab callback. Click the + button to add new tabs.',
+      },
+    },
+  },
+};

packages/twenty-front/src/modules/ui/layout/tab-list/utils/calculateVisibleTabCount.ts

@@ -2,6 +2,7 @@ import { TAB_LIST_GAP } from '@/ui/layout/tab-list/constants/TabListGap';
 import { TAB_LIST_LEFT_PADDING } from '@/ui/layout/tab-list/constants/TabListPadding';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { type TabWidthsById } from '@/ui/layout/tab-list/types/TabWidthsById';
+import { isDefined } from 'twenty-shared/utils';
 
 type CalculateVisibleTabCountParams = {
   visibleTabs: SingleTabProps[];
@@ -22,7 +23,6 @@ export const calculateVisibleTabCount = ({
     return visibleTabs.length;
   }
 
-  // Subtract add button width if present
   const availableWidth =
     containerWidth -
     TAB_LIST_LEFT_PADDING -
@@ -33,8 +33,7 @@ export const calculateVisibleTabCount = ({
     const tab = visibleTabs[i];
     const tabWidth = tabWidthsById[tab.id];
 
-    // Skip if width not measured yet
-    if (tabWidth === undefined) {
+    if (!isDefined(tabWidth)) {
       return visibleTabs.length;
     }