feat: new tab list #12384

ehconitin · 2025-05-30T11:38:02Z

closes #9904

a compoenent inside a component

github-actions · 2025-05-30T12:03:36Z

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:35747

This environment will automatically shut down when the PR is closed or after 5 hours.

ehconitin · 2025-05-30T12:11:55Z

@greptileai trigger

ehconitin · 2025-05-30T12:17:07Z

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx

      disabled: !canAccessFullAdminPanel,
    },
+    {
+      id: SETTINGS_ADMIN_TABS.CHECK_1,


temporary seeds

ehconitin · 2025-05-30T12:17:12Z

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTabContent.tsx

      return <SettingsAdminConfigVariables />;
    case SETTINGS_ADMIN_TABS.HEALTH_STATUS:
      return <SettingsAdminHealthStatus />;
+    case SETTINGS_ADMIN_TABS.CHECK_1:


ehconitin · 2025-05-30T12:17:16Z

packages/twenty-front/src/modules/settings/admin-panel/constants/SettingsAdminTabs.ts

+  CHECK_5: 'check-5',
+  CHECK_6: 'check-6',
+  CHECK_7: 'check-7',
+  CHECK_8: 'check-8',


Bonapara · 2025-05-30T15:01:13Z

Thanks for sharing @ehconitin

Current

Desired

Can you gather the "More" tab with the other tabs?

Also can you correct the chevron down icon color, font-weight & spacing?

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=54106-118010&t=bBF5G2XnvwPP16NG-11

ehconitin · 2025-06-02T07:50:19Z

@greptileai trigger

greptile-apps

PR Summary

Implements a new tab list feature replacing scrollable tabs with a '+X more' dropdown for overflow tabs, following the design specifications from Figma.

Remove test tabs (CHECK_1 through CHECK_8) from SettingsAdminTabs.ts and SettingsAdminTabContent.tsx as they appear to be temporary development artifacts
Consider adding accessibility attributes (aria-labels, roles) to TabMoreButton and TabListDropdown components for better screen reader support
Add error boundaries around the tab overflow detection logic in isFirstOverflowingTab.ts to handle edge cases when elements are null
Consider adding ResizeObserver to handle dynamic width changes in TabList component
Add unit tests for the overflow calculation logic to ensure consistent behavior across different screen sizes

_{13 file(s) reviewed, 12 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTabContent.tsx

packages/twenty-front/src/modules/settings/admin-panel/constants/SettingsAdminTabs.ts

packages/twenty-front/src/modules/ui/layout/tab/components/TabAvatar.tsx

packages/twenty-front/src/modules/ui/layout/tab/components/TabListDropdown.tsx

packages/twenty-front/src/modules/ui/layout/tab/components/TabMoreButton.tsx

packages/twenty-front/src/modules/ui/layout/tab/components/TabSharedStyles.tsx

...ages/twenty-front/src/modules/ui/layout/tab/components/__stories__/TabMoreButton.stories.tsx

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

packages/twenty-front/src/modules/ui/layout/tab/components/TabAvatar.tsx

charlesBochet · 2025-06-02T15:24:15Z

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

-    </StyledTab>
-  );
-};
+Tab.displayName = 'Tab';


Why do we need to add this here? Is it because of the forwardRef?
Seems non standard to me but we can revisit if there is a good reason

Yes forward ref! Not related to this PR.
pretty sure this was added just for clear debugging in devtools

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

charlesBochet · 2025-06-02T15:25:19Z

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

+    resetFirstHiddenTabIndex,
+  ]);
+
+  const handleTabSelectFromDropdown = useCallback(


then you start using callbacks because you have re-renders because of useEffects

packages/twenty-front/src/modules/ui/layout/tab/components/TabListDropdown.tsx

packages/twenty-front/src/modules/ui/layout/tab/components/TabSharedStyles.tsx

charlesBochet

Hi @ehconitin, thanks for taking this one

I'm not a fan of the current approach which is relying on refs and effects and is not re-usable for similar problems in the code base.

A different approach:

re-introduce a component that will render the child component without displaying it (visibility: hidden) => this component will contains a useEffect indeed
render all the tabs within NodeDimension and onDimensionChange increment a counter (you'll likely need to store all tab size in an array and take the sum
you can also leverage onDimensionChange callback to get the width of the container in a state
then you can easily compute how many tabs you can fit in the container

packages/twenty-front/src/modules/ui/utilities/dimensions/components/NodeDimension.tsx

...kflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx

charlesBochet

Looks way better, let's fix the comments and the tests :)

ehconitin · 2025-06-05T11:24:04Z

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

+    return visibleTabs.length;
+  }
+
+  const availableWidth = containerWidth - TAB_LIST_LEFT_PADDING;


@charlesBochet
what should I do here? This padding isn't the case everytime, it is being styled in the parent to add paddings.
we could pass in padding as a prop but its not standard!

Indeed! We could get the "insideContainerWidth" by rendering a width:100% div within the container and using NodeDimension in this case

charlesBochet

TY @ehconitin for completing this and taking all the feedbacks
I think we can merge it as it is. If you have time, there are still two areas we could improve:

simplify the containerWidth calculation: I'm not sure we need to render all the children, a width:100% should suffice (or anything that would take all the width)
take padding into account indeed, it seems that we have a bit more room on show page tabs

ehconitin · 2025-06-06T07:43:06Z

Will do!

closes #9904 --------- Co-authored-by: Charles Bochet <[email protected]>

closes twentyhq#9904 --------- Co-authored-by: Charles Bochet <[email protected]>

ehconitin added 9 commits May 30, 2025 13:33

WIP

5a3d585

wip

124d17d

copy over tab styles to button

c2f9cd7

refactor

9b70fa3

refactor

182fecb

update story books

ca31855

continue

dc35ac1

continue

f939fc9

continue + lint

8662165

ehconitin self-assigned this May 30, 2025

ehconitin mentioned this pull request May 30, 2025

Implemented more button in TabList #10096

Closed

ehconitin and others added 2 commits May 30, 2025 17:19

do not have a function returning

7111bc0

a compoenent inside a component

Merge branch 'main' into new-tab-list

2770136

ehconitin requested a review from charlesBochet May 30, 2025 11:52

ehconitin commented May 30, 2025

View reviewed changes

ehconitin added the -PR: awaiting review label May 30, 2025

greptile-apps bot reviewed Jun 2, 2025

View reviewed changes

charlesBochet reviewed Jun 2, 2025

View reviewed changes

packages/twenty-front/src/modules/ui/layout/tab/components/TabAvatar.tsx Show resolved Hide resolved

charlesBochet reviewed Jun 2, 2025

View reviewed changes

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx Outdated Show resolved Hide resolved

charlesBochet reviewed Jun 2, 2025

View reviewed changes

packages/twenty-front/src/modules/ui/layout/tab/components/TabListDropdown.tsx Show resolved Hide resolved

charlesBochet reviewed Jun 2, 2025

View reviewed changes

packages/twenty-front/src/modules/ui/layout/tab/components/TabSharedStyles.tsx Outdated Show resolved Hide resolved

charlesBochet requested changes Jun 2, 2025

View reviewed changes

charlesBochet reviewed Jun 3, 2025

View reviewed changes

packages/twenty-front/src/modules/ui/utilities/dimensions/components/NodeDimension.tsx Show resolved Hide resolved

charlesBochet reviewed Jun 3, 2025

View reviewed changes

...kflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx Outdated Show resolved Hide resolved

charlesBochet added -PR: awaiting author and removed -PR: wip -PR: awaiting author labels Jun 3, 2025

charlesBochet reviewed Jun 3, 2025

View reviewed changes

ehconitin and others added 13 commits June 4, 2025 10:47

Merge branch 'main' into new-tab-list

cb231a9

yagni - we did not need forward ref in tab

da8afdf

refactor: use ID-based dictionary for tab width tracking

25ab03b

remove redundant useMemo

07cc564

simplify api

26fc018

revert right paddings

7d1f378

revert right paddings

c56e8f9

add TabButton to twenty-ui and refactor

9ef1352

Merge branch 'main' into new-tab-list

3f95c62

add disable test id prop to tabbutton

a45b29f

remove seeds

a769611

refacto

cd9f36a

Merge branch 'main' into new-tab-list

9756cae

ehconitin commented Jun 5, 2025

View reviewed changes

ehconitin requested a review from charlesBochet June 5, 2025 11:24

ehconitin added -PR: awaiting review and removed -PR: awaiting author labels Jun 5, 2025

charlesBochet approved these changes Jun 5, 2025

View reviewed changes

Merge branch 'main' into new-tab-list

6677c3e

charlesBochet merged commit 6f156a6 into twentyhq:main Jun 5, 2025
8 checks passed

ehconitin deleted the new-tab-list branch June 6, 2025 07:43

charlesBochet added a commit that referenced this pull request Jun 6, 2025

feat: new tab list (#12384)

bf5806f

closes #9904 --------- Co-authored-by: Charles Bochet <[email protected]>

abdulrahmancodes pushed a commit to abdulrahmancodes/twenty that referenced this pull request Jun 10, 2025

feat: new tab list (twentyhq#12384)

051d364

closes twentyhq#9904 --------- Co-authored-by: Charles Bochet <[email protected]>

feat: new tab list #12384

feat: new tab list #12384

Uh oh!

Conversation

ehconitin commented May 30, 2025

Uh oh!

github-actions bot commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ehconitin commented May 30, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Bonapara commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current

Desired

Uh oh!

ehconitin commented Jun 2, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

charlesBochet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

charlesBochet left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

charlesBochet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ehconitin commented Jun 6, 2025

Uh oh!

Uh oh!

github-actions bot commented May 30, 2025 •

edited

Loading

Bonapara commented May 30, 2025 •

edited

Loading