Hide conversation title upon scrolling content of an email

MAILWEB-3532

3 files changed, 37 insertions, 12 deletions

diff --git a/applications/mail/src/app/components/conversation/ConversationView.tsx b/applications/mail/src/app/components/conversation/ConversationView.tsx
index 5ab9924b78..b838e1874a 100644
--- a/applications/mail/src/app/components/conversation/ConversationView.tsx
+++ b/applications/mail/src/app/components/conversation/ConversationView.tsx
@@ -1,7 +1,7 @@
 import { memo, useEffect, useRef } from 'react';
 import * as React from 'react';
 
-import { Scroll, classnames, useLabels, useToggle } from '@proton/components';
+import { FeatureCode, Scroll, classnames, useFeature, useLabels, useToggle } from '@proton/components';
 import { MAILBOX_LABEL_IDS } from '@proton/shared/lib/constants';
 import { MailSettings } from '@proton/shared/lib/interfaces';
 import { Message } from '@proton/shared/lib/interfaces/mail/Message';
@@ -85,6 +85,9 @@ const ConversationView = ({
 
     const { focusIndex, handleFocus, handleBlur, getFocusedId } = useConversationFocus(messagesToShow);
 
+    const { feature: conversationHeaderInScrollFeature } = useFeature(FeatureCode.ConversationHeaderInScroll);
+    const shouldShowConversationHeaderInScroll = conversationHeaderInScrollFeature?.Value;
+
     const expandMessage = (messageID: string | undefined, scrollTo = false) => {
         messageViewsRefs.current[messageID || '']?.expand();
         const index = messages.findIndex((message) => message.ID === messageID);
@@ -137,12 +140,21 @@ const ConversationView = ({
         <ConversationErrorBanner errors={conversationState?.errors} onRetry={handleRetry} />
     ) : (
         <>
-            <ConversationHeader
-                className={classnames([hidden && 'hidden'])}
-                loading={loadingConversation}
-                element={conversation}
-            />
+            {!shouldShowConversationHeaderInScroll && (
+                <ConversationHeader
+                    className={classnames([hidden && 'hidden'])}
+                    loading={loadingConversation}
+                    element={conversation}
+                />
+            )}
             <Scroll className={classnames([hidden && 'hidden'])} customContainerRef={containerRef}>
+                {shouldShowConversationHeaderInScroll && (
+                    <ConversationHeader
+                        className={classnames([hidden && 'hidden'])}
+                        loading={loadingConversation}
+                        element={conversation}
+                    />
+                )}
                 <div ref={wrapperRef} className="flex-item-fluid pt1 pr1 pl1 w100">
                     <div className="outline-none" ref={elementRef} tabIndex={-1}>
                         {showMessagesError ? (
diff --git a/applications/mail/src/app/components/message/MessageOnlyView.tsx b/applications/mail/src/app/components/message/MessageOnlyView.tsx
index 78c3d382a8..2d77f7164e 100644
--- a/applications/mail/src/app/components/message/MessageOnlyView.tsx
+++ b/applications/mail/src/app/components/message/MessageOnlyView.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { Scroll, classnames, useHotkeys, useLabels } from '@proton/components';
+import { FeatureCode, Scroll, classnames, useFeature, useHotkeys, useLabels } from '@proton/components';
 import { MailSettings } from '@proton/shared/lib/interfaces';
 import { Message } from '@proton/shared/lib/interfaces/mail/Message';
 import { isDraft } from '@proton/shared/lib/mail/messages';
@@ -44,6 +44,9 @@ const MessageOnlyView = ({
     const { message, messageLoaded, bodyLoaded } = useMessage(messageID);
     const load = useLoadMessage(message.data || ({ ID: messageID } as MessageWithOptionalBody));
 
+    const { feature: conversationHeaderInScrollFeature } = useFeature(FeatureCode.ConversationHeaderInScroll);
+    const shouldShowConversationHeaderInScroll = conversationHeaderInScrollFeature?.Value;
+
     useShouldMoveOut(false, messageID, !bodyLoaded, onBack);
 
     // Manage loading the message
@@ -114,12 +117,21 @@ const MessageOnlyView = ({
 
     return (
         <>
-            <ConversationHeader
-                className={classnames([hidden && 'hidden'])}
-                loading={!messageLoaded}
-                element={message.data}
-            />
+            {!shouldShowConversationHeaderInScroll && (
+                <ConversationHeader
+                    className={classnames([hidden && 'hidden'])}
+                    loading={!messageLoaded}
+                    element={message.data}
+                />
+            )}
             <Scroll className={classnames([hidden && 'hidden'])}>
+                {shouldShowConversationHeaderInScroll && (
+                    <ConversationHeader
+                        className={classnames([hidden && 'hidden'])}
+                        loading={!messageLoaded}
+                        element={message.data}
+                    />
+                )}
                 <div
                     className="flex-item-fluid px1 mt1-25 max-w100 outline-none"
                     ref={messageContainerRef}
diff --git a/packages/components/containers/features/FeaturesContext.ts b/packages/components/containers/features/FeaturesContext.ts
index dd3bdcca7b..ecfa92e77b 100644
--- a/packages/components/containers/features/FeaturesContext.ts
+++ b/packages/components/containers/features/FeaturesContext.ts
@@ -86,6 +86,7 @@ export enum FeatureCode {
     BulkUserUpload = 'BulkUserUpload',
     DriveBeta = 'DriveBeta',
     PartialEncryptedSearch = 'PartialEncryptedSearch',
+    ConversationHeaderInScroll = 'ConversationHeaderInScroll',
 }
 
 export interface FeaturesContextValue {