feat: new tab list

packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx

@@ -3,7 +3,6 @@ import { getRightDrawerActionMenuDropdownIdFromActionMenuId } from '@/action-men
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { AppPath } from '@/types/AppPath';
@@ -16,18 +15,13 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import styled from '@emotion/styled';
 import { useCallback } from 'react';
-import { Link } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { IconBrowserMaximize } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { getOsControlSymbol } from 'twenty-ui/utilities';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
-const StyledLink = styled(Link)`
-  text-decoration: none;
-`;
 
 type RecordShowRightDrawerOpenRecordButtonProps = {
   objectNameSingular: string;
@@ -117,18 +111,15 @@ export const RecordShowRightDrawerOpenRecordButton = ({
     return null;
   }
 
-  const to = getLinkToShowPage(objectNameSingular, record);
-
   return (
-    <StyledLink to={to} onClick={closeCommandMenu}>
-      <Button
-        title="Open"
-        variant="primary"
-        accent="blue"
-        size="medium"
-        Icon={IconBrowserMaximize}
-        hotkeys={[getOsControlSymbol(), '⏎']}
-      />
-    </StyledLink>
+    <Button
+      title="Open"
+      variant="primary"
+      accent="blue"
+      size="medium"
+      Icon={IconBrowserMaximize}
+      hotkeys={[getOsControlSymbol(), '⏎']}
+      onClick={handleOpenRecord}
+    />
   );
 };

packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx

@@ -32,6 +32,7 @@ const StyledContainer = styled.div`
 const StyledTabList = styled(TabList)`
   background-color: ${({ theme }) => theme.background.secondary};
   padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
 type TabId = WorkflowRunTabIdType;

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

@@ -31,6 +31,54 @@ export const SettingsAdminContent = () => {
       Icon: IconHeart,
       disabled: !canAccessFullAdminPanel,
     },
+    {
+      id: SETTINGS_ADMIN_TABS.CHECK_1,
+      title: t`C`,
+      Icon: IconHeart,
+      disabled: !canAccessFullAdminPanel,
+    },
+    {
+      id: SETTINGS_ADMIN_TABS.CHECK_2,
+      title: t`Check 2`,
+      Icon: IconHeart,
+      disabled: !canAccessFullAdminPanel,
+    },
+    {
+      id: SETTINGS_ADMIN_TABS.CHECK_3,
+      title: t`Check 3`,
+      Icon: IconHeart,
+      disabled: !canAccessFullAdminPanel,
+    },
+    {
+      id: SETTINGS_ADMIN_TABS.CHECK_4,
+      title: t`Check 4`,
+      Icon: IconHeart,
+      disabled: !canAccessFullAdminPanel,
+    },
+    {
+      id: SETTINGS_ADMIN_TABS.CHECK_5,
+      title: t`Check 5`,
+      Icon: IconHeart,
+      disabled: !canAccessFullAdminPanel,
+    },
+    {
+      id: SETTINGS_ADMIN_TABS.CHECK_6,
+      title: t`Check 6`,
+      Icon: IconHeart,
+      disabled: !canAccessFullAdminPanel,
+    },
+    {
+      id: SETTINGS_ADMIN_TABS.CHECK_7,
+      title: t`Check 7`,
+      Icon: IconHeart,
+      disabled: !canAccessFullAdminPanel,
+    },
+    {
+      id: SETTINGS_ADMIN_TABS.CHECK_8,
+      title: t`Check 8`,
+      Icon: IconHeart,
+      disabled: !canAccessFullAdminPanel,
+    },
   ];
 
   return (

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

@@ -19,6 +19,22 @@ export const SettingsAdminTabContent = () => {
       return <SettingsAdminConfigVariables />;
     case SETTINGS_ADMIN_TABS.HEALTH_STATUS:
       return <SettingsAdminHealthStatus />;
+    case SETTINGS_ADMIN_TABS.CHECK_1:
+      return <div>Check 1</div>;
+    case SETTINGS_ADMIN_TABS.CHECK_2:
+      return <div>Check 2</div>;
+    case SETTINGS_ADMIN_TABS.CHECK_3:
+      return <div>Check 3</div>;
+    case SETTINGS_ADMIN_TABS.CHECK_4:
+      return <div>Check 4</div>;
+    case SETTINGS_ADMIN_TABS.CHECK_5:
+      return <div>Check 5</div>;
+    case SETTINGS_ADMIN_TABS.CHECK_6:
+      return <div>Check 6</div>;
+    case SETTINGS_ADMIN_TABS.CHECK_7:
+      return <div>Check 7</div>;
+    case SETTINGS_ADMIN_TABS.CHECK_8:
+      return <div>Check 8</div>;
     default:
       return null;
   }

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

@@ -2,4 +2,12 @@ export const SETTINGS_ADMIN_TABS = {
   GENERAL: 'general',
   CONFIG_VARIABLES: 'config-variables',
   HEALTH_STATUS: 'health-status',
+  CHECK_1: 'check-1',
+  CHECK_2: 'check-2',
+  CHECK_3: 'check-3',
+  CHECK_4: 'check-4',
+  CHECK_5: 'check-5',
+  CHECK_6: 'check-6',
+  CHECK_7: 'check-7',
+  CHECK_8: 'check-8',
 };

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx

@@ -28,11 +28,18 @@ const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
 `;
 
 const StyledTabListContainer = styled.div<{ shouldDisplay: boolean }>`
-  display: ${({ shouldDisplay }) => (shouldDisplay ? 'flex' : 'none')};
+  ${({ shouldDisplay }) =>
+    !shouldDisplay &&
+    `
+    visibility: hidden;
+    height: 0;
+    overflow: hidden;
+  `}
 `;
 
 const StyledTabList = styled(TabList)`
   padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledContentContainer = styled.div<{ isInRightDrawer: boolean }>`

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

@@ -1,12 +1,14 @@
-import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
-import isPropValid from '@emotion/is-prop-valid';
 import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ReactElement } from 'react';
+import { ReactElement, forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 import { Pill } from 'twenty-ui/components';
 import { Avatar, IconComponent } from 'twenty-ui/display';
 import { useMouseDownNavigation } from 'twenty-ui/utilities';
+import {
+  StyledTabBase,
+  StyledTabHover,
+  StyledTabIconContainer,
+} from './TabSharedStyles';
 
 type TabProps = {
   id: string;
@@ -21,119 +23,73 @@ type TabProps = {
   logo?: string;
 };
 
-const StyledTab = styled('button', {
-  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'active',
-})<{ active?: boolean; disabled?: boolean; to?: string }>`
-  all: unset;
-  align-items: center;
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
-  border-color: ${({ theme, active }) =>
-    active ? theme.border.color.inverted : 'transparent'};
-  color: ${({ theme, active, disabled }) =>
-    active
+export const Tab = forwardRef<HTMLButtonElement, TabProps>(
+  (
+    {
+      id,
+      title,
+      Icon,
+      active = false,
+      onClick,
+      className,
+      disabled,
+      pill,
+      to,
+      logo,
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+    const { onClick: handleClick, onMouseDown: handleMouseDown } =
+      useMouseDownNavigation({
+        to,
+        onClick,
+        disabled,
+      });
+
+    const iconColor = active
       ? theme.font.color.primary
       : disabled
         ? theme.font.color.light
-        : theme.font.color.secondary};
-  cursor: pointer;
-  background-color: transparent;
-  border-left: none;
-  border-right: none;
-  border-top: none;
-  font-family: inherit;
-
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-  justify-content: center;
-  margin-bottom: -1px;
-  padding: ${({ theme }) => theme.spacing(2) + ' 0'};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
-  text-decoration: none;
-`;
-
-const StyledHover = styled.span`
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-  padding: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  width: 100%;
-  &:hover {
-    background: ${({ theme }) => theme.background.tertiary};
-    border-radius: ${({ theme }) => theme.border.radius.sm};
-  }
-  &:active {
-    background: ${({ theme }) => theme.background.quaternary};
-  }
-`;
+        : theme.font.color.secondary;
 
-const StyledIconContainer = styled.div`
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
+    return (
+      <StyledTabBase
+        ref={ref}
+        onClick={handleClick}
+        onMouseDown={handleMouseDown}
+        active={active}
+        className={className}
+        disabled={disabled}
+        data-testid={'tab-' + id}
+        as={to ? Link : 'button'}
+        to={to}
+      >
+        <StyledTabHover>
+          <StyledTabIconContainer>
+            {logo && (
+              <Avatar
+                avatarUrl={logo}
+                size="md"
+                placeholder={title}
+                iconColor={iconColor}
+              />
+            )}
+            {Icon && (
+              <Avatar
+                Icon={Icon}
+                size="md"
+                placeholder={title}
+                iconColor={iconColor}
+              />
+            )}
+          </StyledTabIconContainer>
+          {title}
+          {pill && typeof pill === 'string' ? <Pill label={pill} /> : pill}
+        </StyledTabHover>
+      </StyledTabBase>
+    );
+  },
+);
 
-export const Tab = ({
-  id,
-  title,
-  Icon,
-  active = false,
-  onClick,
-  className,
-  disabled,
-  pill,
-  to,
-  logo,
-}: TabProps) => {
-  const theme = useTheme();
-  const { onClick: handleClick, onMouseDown: handleMouseDown } =
-    useMouseDownNavigation({
-      to,
-      onClick,
-      disabled,
-    });
-
-  const iconColor = active
-    ? theme.font.color.primary
-    : disabled
-      ? theme.font.color.light
-      : theme.font.color.secondary;
-
-  return (
-    <StyledTab
-      onClick={handleClick}
-      onMouseDown={handleMouseDown}
-      active={active}
-      className={className}
-      disabled={disabled}
-      data-testid={'tab-' + id}
-      as={to ? Link : 'button'}
-      to={to}
-    >
-      <StyledHover>
-        <StyledIconContainer>
-          {logo && (
-            <Avatar
-              avatarUrl={logo}
-              size="md"
-              placeholder={title}
-              iconColor={iconColor}
-            />
-          )}
-          {Icon && (
-            <Avatar
-              Icon={Icon}
-              size="md"
-              placeholder={title}
-              iconColor={iconColor}
-            />
-          )}
-        </StyledIconContainer>
-        <EllipsisDisplay>{title}</EllipsisDisplay>
-        {pill && typeof pill === 'string' ? <Pill label={pill} /> : pill}
-      </StyledHover>
-    </StyledTab>
-  );
-};
+Tab.displayName = 'Tab';