Implemented more button in TabList

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

@@ -11,6 +11,7 @@ type TabProps = {
   title: string;
   Icon?: IconComponent;
   active?: boolean;
+  inDropdown?: boolean;
   className?: string;
   onClick?: () => void;
   disabled?: boolean;
@@ -21,7 +22,7 @@ type TabProps = {
 
 const StyledTab = styled('button', {
   shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'active',
-})<{ active?: boolean; disabled?: boolean; to?: string }>`
+})<{ active?: boolean; disabled?: boolean; to?: string; inDropdown?: boolean }>`
   align-items: center;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   border-color: ${({ theme, active }) =>
@@ -43,8 +44,14 @@ const StyledTab = styled('button', {
   justify-content: center;
   margin-bottom: 0;
   padding: ${({ theme }) => theme.spacing(2) + ' 0'};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
   text-decoration: none;
+
+  &:hover {
+    background: ${({ theme, inDropdown }) =>
+      inDropdown ? theme.background.tertiary : 'transparent'};
+  }
+  border-radius: ${({ theme }) => theme.border.radius.sm};
 `;
 
 const StyledHover = styled.span`
@@ -73,6 +80,7 @@ export const Tab = ({
   title,
   Icon,
   active = false,
+  inDropdown = false,
   onClick,
   className,
   disabled,
@@ -91,6 +99,7 @@ export const Tab = ({
       active={active}
       className={className}
       disabled={disabled}
+      inDropdown={inDropdown}
       data-testid={'tab-' + id}
       as={to ? Link : 'button'}
       to={to}

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

@@ -2,12 +2,11 @@ import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabList
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
 import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { IconComponent } from 'twenty-ui';
+import { useEffect, useState, useCallback } from 'react';
 import { Tab } from './Tab';
+import { MoreTabsDropdown } from './TabMoreDropdown';
+import { IconComponent, IconChevronDown } from 'twenty-ui';
 
 export type SingleTabProps = {
   title: string;
@@ -38,17 +37,41 @@ const StyledContainer = styled.div`
   user-select: none;
 `;
 
+const StyledDropdownContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
 export const TabList = ({
   tabs,
   tabListInstanceId,
-  loading,
+  loading = false,
   behaveAsLinks = true,
-  isInRightDrawer,
+  isInRightDrawer = false,
   className,
 }: TabListProps) => {
+  const { activeTabId, setActiveTabId } = useTabList(tabListInstanceId);
   const visibleTabs = tabs.filter((tab) => !tab.hide);
 
-  const { activeTabId, setActiveTabId } = useTabList(tabListInstanceId);
+  const [maxVisibleTabs, setMaxVisibleTabs] = useState<number>(
+    visibleTabs.length,
+  );
+
+  const containerRef = (node: HTMLDivElement) => {
+    const containerWidth = node.offsetWidth;
+    const firstTab = node.querySelector(
+      '.tab-item',
+    ) as HTMLElement;
+    if (!firstTab) return;
+
+    const tabWidth = firstTab.offsetWidth + 16; // 16px := gap between tabs
+    const calculatedMaxVisible = Math.floor(containerWidth / tabWidth) - 1; // -1 to make space for the dropdown button
+    setMaxVisibleTabs(calculatedMaxVisible);
+  };
+
+  const truncatedTabs = visibleTabs.slice(0, maxVisibleTabs);
+  const remainingTabs = visibleTabs.slice(maxVisibleTabs);
 
   const initialActiveTabId = activeTabId || visibleTabs[0]?.id || '';
 
@@ -60,39 +83,65 @@ export const TabList = ({
     return null;
   }
 
+  const handleTabClick = (tabId: string) => {
+    if (!behaveAsLinks) {
+      setActiveTabId(tabId);
+    }
+  };
+
   return (
     <TabListScope tabListScopeId={tabListInstanceId}>
       <TabListFromUrlOptionalEffect
-        isInRightDrawer={!!isInRightDrawer}
+        isInRightDrawer={isInRightDrawer}
         componentInstanceId={tabListInstanceId}
         tabListIds={tabs.map((tab) => tab.id)}
       />
-      <ScrollWrapper
-        defaultEnableYScroll={false}
-        contextProviderName="tabList"
-        componentInstanceId={`scroll-wrapper-tab-list-${tabListInstanceId}`}
-      >
-        <StyledContainer className={className}>
-          {visibleTabs.map((tab) => (
-            <Tab
-              id={tab.id}
-              key={tab.id}
-              title={tab.title}
-              Icon={tab.Icon}
-              logo={tab.logo}
-              active={tab.id === activeTabId}
-              disabled={tab.disabled ?? loading}
-              pill={tab.pill}
-              to={behaveAsLinks ? `#${tab.id}` : undefined}
-              onClick={() => {
-                if (!behaveAsLinks) {
-                  setActiveTabId(tab.id);
-                }
-              }}
-            />
-          ))}
-        </StyledContainer>
-      </ScrollWrapper>
+      <StyledContainer className={className} ref={containerRef}>
+        {truncatedTabs.map((tab) => (
+          <Tab
+            key={tab.id}
+            id={tab.id}
+            title={tab.title}
+            Icon={tab.Icon}
+            logo={tab.logo}
+            active={tab.id === activeTabId}
+            disabled={tab.disabled ?? loading}
+            pill={tab.pill}
+            to={behaveAsLinks ? `#${tab.id}` : undefined}
+            onClick={() => handleTabClick(tab.id)}
+            inDropdown={false}
+            // Add a class for measurement
+            className="tab-item"
+          />
+        ))}
+        {remainingTabs.length > 0 && (
+          <MoreTabsDropdown
+            id="more-button"
+            title={`+${remainingTabs.length} More`}
+            Icon={IconChevronDown}
+            dropdownContent={
+              <StyledDropdownContainer>
+                {remainingTabs.map((tab) => (
+                  <Tab
+                    key={tab.id}
+                    id={tab.id}
+                    title={tab.title}
+                    Icon={tab.Icon}
+                    logo={tab.logo}
+                    active={tab.id === activeTabId}
+                    disabled={tab.disabled ?? loading}
+                    pill={tab.pill}
+                    to={behaveAsLinks ? `#${tab.id}` : undefined}
+                    onClick={() => handleTabClick(tab.id)}
+                    inDropdown={true}
+                  />
+                ))}
+              </StyledDropdownContainer>
+            }
+            dropdownPlacement="bottom-start"
+          />
+        )}
+      </StyledContainer>
     </TabListScope>
   );
 };

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

@@ -0,0 +1,61 @@
+import { Button, IconComponent } from 'twenty-ui';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import styled from '@emotion/styled';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+
+type MoreTabsDropdownProps = {
+  id: string;
+  title: string;
+  Icon: IconComponent;
+  dropdownContent?: React.ReactNode;
+  dropdownPlacement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+  onDropdownOpen?: () => void;
+  onDropdownClose?: () => void;
+};
+
+export const MoreTabsDropdown = ({
+  id,
+  title,
+  Icon,
+  dropdownContent,
+  dropdownPlacement = 'bottom-start',
+  onDropdownOpen,
+  onDropdownClose,
+}: MoreTabsDropdownProps) => {
+  if (!dropdownContent) {
+    return <Button title={title} Icon={Icon} />;
+  }
+
+  const StyledButtonContainer = styled.div`
+    height: 100%;
+    display: flex;
+    align-items: center;
+  `;
+
+  // Define a basic hotkey scope for the dropdown
+  const dropdownHotkeyScope: HotkeyScope = {
+    scope: `dropdown-${id}`,
+  };
+
+  return (
+    <Dropdown
+      dropdownId={`more-button-${id}-dropdown`}
+      dropdownHotkeyScope={dropdownHotkeyScope}
+      dropdownPlacement={dropdownPlacement}
+      dropdownComponents={dropdownContent}
+      onOpen={onDropdownOpen}
+      onClose={onDropdownClose}
+      clickableComponent={
+        <StyledButtonContainer>
+          <Button
+            variant="tertiary"
+            size="small"
+            title={title}
+            Icon={Icon}
+            IconPosition="right"
+          />
+        </StyledButtonContainer>
+      }
+    />
+  );
+};

packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx

@@ -14,7 +14,6 @@ export type ContextProviderName =
   | 'dropdownMenuItemsContainer'
   | 'showPageContainer'
   | 'showPageLeftContainer'
-  | 'tabList'
   | 'releases'
   | 'test'
   | 'showPageActivityContainer'
@@ -44,8 +43,6 @@ export const ShowPageContainerScrollWrapperContext =
   createScrollWrapperContext('showPageContainer');
 export const ShowPageLeftContainerScrollWrapperContext =
   createScrollWrapperContext('showPageLeftContainer');
-export const TabListScrollWrapperContext =
-  createScrollWrapperContext('tabList');
 export const ReleasesScrollWrapperContext =
   createScrollWrapperContext('releases');
 export const ShowPageActivityContainerScrollWrapperContext =
@@ -78,8 +75,6 @@ export const getContextByProviderName = (
       return ShowPageContainerScrollWrapperContext;
     case 'showPageLeftContainer':
       return ShowPageLeftContainerScrollWrapperContext;
-    case 'tabList':
-      return TabListScrollWrapperContext;
     case 'releases':
       return ReleasesScrollWrapperContext;
     case 'test':

packages/twenty-ui/src/input/button/components/Button.tsx

@@ -12,10 +12,12 @@ export type ButtonSize = 'medium' | 'small';
 export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 export type ButtonAccent = 'default' | 'blue' | 'danger';
+export type IconPosition = 'left' | 'right';
 
 export type ButtonProps = {
   className?: string;
   Icon?: IconComponent;
+  IconPosition?: IconPosition;
   title?: string;
   fullWidth?: boolean;
   variant?: ButtonVariant;
@@ -398,6 +400,7 @@ const StyledShortcutLabel = styled.div<{
 export const Button = ({
   className,
   Icon,
+  IconPosition = 'left',
   title,
   fullWidth = false,
   variant = 'primary',
@@ -445,8 +448,9 @@ export const Button = ({
       onFocus={() => setIsFocused(true)}
       onBlur={() => setIsFocused(false)}
     >
-      {Icon && <Icon size={theme.icon.size.sm} />}
+      {Icon && IconPosition === 'left' && <Icon size={theme.icon.size.sm} />}
       {title}
+      {Icon && IconPosition === 'right' && <Icon size={theme.icon.size.sm} />}
       {hotkeys && !isMobile && (
         <>
           <StyledSeparator buttonSize={size} accent={accent} />