Message: Replace "Forwarded message" text with icons

src/components/middle/message/Message.scss

@@ -674,8 +674,11 @@
       --border-top-right-radius: 0;
     }
 
-    &.is-forwarded .content-inner .message-title {
-      margin-bottom: 0.25rem;
+    &.is-forwarded {
+      .message-title .icon {
+        font-size: 0.75rem;
+        margin-right: 0.1875rem;
+      }
     }
   }
 

src/components/middle/message/Message.tsx

@@ -17,9 +17,9 @@ import type {
   ApiMessageOutgoingStatus,
   ApiReaction,
   ApiStickerSet,
-  ApiTypeStory,
   ApiThreadInfo,
   ApiTopic,
+  ApiTypeStory,
   ApiUser,
   ApiUsername,
 } from '../../../api/types';
@@ -57,7 +57,6 @@ import {
   selectMessageIdsByGroupId,
   selectOutgoingStatus,
   selectPerformanceSettingsValue,
-  selectUserStory,
   selectReplySender,
   selectRequestedChatTranslationLanguage,
   selectRequestedMessageTranslationLanguage,
@@ -71,6 +70,7 @@ import {
   selectTopicFromMessage,
   selectUploadProgress,
   selectUser,
+  selectUserStory,
 } from '../../../global/selectors';
 import {
   areReactionsEmpty,
@@ -936,7 +936,7 @@ const Message: FC<OwnProps & StateProps> = ({
 
     return (
       <div className={className} onDoubleClick={handleContentDoubleClick} dir="auto">
-        {renderSenderName()}
+        {!asForwarded && renderSenderName()}
         {hasSubheader && (
           <div className="message-subheader">
             {hasTopicChip && (
@@ -1229,13 +1229,20 @@ const Message: FC<OwnProps & StateProps> = ({
 
     return (
       <div className="message-title" dir="ltr">
-        {senderTitle ? (
+        {(senderTitle || asForwarded) ? (
           <span
-            className={buildClassName('message-title-name interactive', senderColor)}
+            className={buildClassName(
+              'message-title-name',
+              forwardInfo?.hiddenUserName ? 'sender-hidden' : 'interactive',
+              senderColor,
+            )}
             onClick={handleSenderClick}
             dir="ltr"
           >
-            {renderText(senderTitle)}
+            {asForwarded && (
+              <i className={`icon ${forwardInfo?.hiddenUserName ? 'icon-forward' : 'icon-share-filled'}`} />
+            )}
+            {senderTitle ? renderText(senderTitle) : (asForwarded ? NBSP : undefined)}
             {!asForwarded && senderEmojiStatus && (
               <CustomEmoji
                 documentId={senderEmojiStatus.documentId}
@@ -1331,10 +1338,10 @@ const Message: FC<OwnProps & StateProps> = ({
           dir="auto"
         >
           {asForwarded && !isInDocumentGroupNotFirst && (
-            <div className="message-title">
-              {lang(storyData ? 'ForwardedStory' : 'ForwardedMessage')}
+            <>
+              {renderSenderName()}
               {forwardAuthor && <span className="admin-title" dir="auto">{forwardAuthor}</span>}
-            </div>
+            </>
           )}
           {renderContent()}
           {!isInDocumentGroupNotLast && metaPosition === 'standalone' && !isStoryMention && renderReactionsAndMeta()}

src/components/middle/message/_message-content.scss

@@ -276,6 +276,10 @@
       }
     }
 
+    .sender-hidden {
+      font-weight: normal;
+    }
+
     @for $i from 1 through 8 {
       & > .color-#{$i} {
         color: var(--color-user-#{$i});