From b3948d24066f44ba3cab47784b555ffcf0f3f1b2 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Wed, 26 Mar 2025 18:03:42 +0100
Subject: [PATCH] Add selected number to title (#11200)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes https://github.com/twentyhq/core-team-issues/issues/586

<img width="633" alt="Capture d’écran 2025-03-26 à 17 37 10"
src="https://github.com/user-attachments/assets/2215aa95-1f74-4634-b76e-2b9322230fe8"
/>
---
 .../components/RecordIndexPageHeader.tsx      | 40 ++++++++++++++++++-
 .../ui/layout/page/components/PageHeader.tsx  |  3 +-
 2 files changed, 40 insertions(+), 3 deletions(-)

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 ? (
+      <StyledTitleWithSelectedRecords>
+        <StyledTitle>{label}</StyledTitle>
+        <>{'->'}</>
+        <StyledSelectedRecordsCount>
+          {t`${contextStoreNumberOfSelectedRecords} selected`}
+        </StyledSelectedRecordsCount>
+      </StyledTitleWithSelectedRecords>
+    ) : (
+      label
+    );
 
   return (
     <PageHeader title={pageHeaderTitle} Icon={Icon}>
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;
 `;