diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
index fdc97a853..ae282f578 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
@@ -1,15 +1,39 @@
import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActionMenu';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
import { PageHeader } from '@/ui/layout/page/components/PageHeader';
-import { useIcons } from 'twenty-ui';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
import { capitalize } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui';
+
+const StyledTitleWithSelectedRecords = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledTitle = styled.div`
+ color: ${({ theme }) => theme.font.color.primary};
+ padding-right: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+const StyledSelectedRecordsCount = styled.div`
+ color: ${({ theme }) => theme.font.color.tertiary};
+ padding-left: ${({ theme }) => theme.spacing(0.5)};
+`;
export const RecordIndexPageHeader = () => {
const { findObjectMetadataItemByNamePlural } =
useFilteredObjectMetadataItems();
+ const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2(
+ contextStoreNumberOfSelectedRecordsComponentState,
+ );
+
const { objectNamePlural } = useRecordIndexContextOrThrow();
const objectMetadataItem =
@@ -20,8 +44,20 @@ export const RecordIndexPageHeader = () => {
const { recordIndexId } = useRecordIndexContextOrThrow();
+ const label = objectMetadataItem?.labelPlural ?? capitalize(objectNamePlural);
+
const pageHeaderTitle =
- objectMetadataItem?.labelPlural ?? capitalize(objectNamePlural);
+ contextStoreNumberOfSelectedRecords > 0 ? (
+
+ {label}
+ <>{'->'}>
+
+ {t`${contextStoreNumberOfSelectedRecords} selected`}
+
+
+ ) : (
+ label
+ );
return (
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
index 69a83ddc8..a7664ce12 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
@@ -54,7 +54,8 @@ const StyledTitleContainer = styled.div`
display: flex;
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.medium};
- margin-left: ${({ theme }) => theme.spacing(1)};
+ margin-left: ${({ theme }) => theme.spacing(0.5)};
+ margin-right: ${({ theme }) => theme.spacing(1)};
width: 100%;
overflow: hidden;
`;