feat: Add visible to you text on ephemeral posts (#8245)

* feat: Add visible to you text on ephemeral posts

* docs: update localization file

* style: system header of ephemeral post

* feat: visible to you text for ephemeral posts

app/components/post_list/post/header/header.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import {View} from 'react-native';
 
+import FormattedText from '@app/components/formatted_text';
 import FormattedTime from '@components/formatted_time';
 import PostPriorityLabel from '@components/post_priority/post_priority_label';
 import {CHANNEL, THREAD} from '@constants/screens';
@@ -63,6 +64,13 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             opacity: 0.5,
             ...typography('Body', 75, 'Regular'),
         },
+        visibleToYou: {
+            color: theme.centerChannelColor,
+            marginTop: 5,
+            marginLeft: 5,
+            opacity: 0.5,
+            ...typography('Body', 75, 'Regular'),
+        },
         postPriority: {
             alignSelf: 'center',
             marginLeft: 6,
@@ -121,6 +129,14 @@ const Header = (props: HeaderProps) => {
                         style={style.time}
                         testID='post_header.date_time'
                     />
+                    {isEphemeral && (
+                        <FormattedText
+                            id='post_header.visible_message'
+                            defaultMessage='(Only visible to you)'
+                            style={style.visibleToYou}
+                            testID='post_header.visible_message'
+                        />
+                    )}
                     {showPostPriority && post.metadata?.priority?.priority && (
                         <View style={style.postPriority}>
                             <PostPriorityLabel

app/components/post_list/post/post.tsx

@@ -306,6 +306,7 @@ const Post = ({
                 <SystemHeader
                     createAt={post.createAt}
                     theme={theme}
+                    isEphemeral={isEphemeral}
                 />
             );
         } else {

app/components/system_header/index.tsx

@@ -22,6 +22,7 @@ type Props = {
     createAt: number | string | Date;
     isMilitaryTime: boolean;
     theme: Theme;
+    isEphemeral?: boolean;
     user?: UserModel;
 }
 
@@ -40,22 +41,29 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             flex: 1,
             flexDirection: 'row',
         },
+        headerWithTop: {
+            marginTop: 10,
+        },
+        timeContainer: {
+            flex: 1,
+            marginTop: 5,
+            flexDirection: 'row',
+            gap: 5,
+        },
         time: {
             color: theme.centerChannelColor,
-            marginTop: 5,
             opacity: 0.5,
-            flex: 1,
             ...typography('Body', 75, 'Regular'),
         },
     };
 });
 
-const SystemHeader = ({isMilitaryTime, createAt, theme, user}: Props) => {
+const SystemHeader = ({isMilitaryTime, createAt, theme, user, isEphemeral}: Props) => {
     const styles = getStyleSheet(theme);
     const userTimezone = getUserTimezone(user);
 
     return (
-        <View style={styles.header}>
+        <View style={[styles.header, isEphemeral && styles.headerWithTop]}>
             <View style={styles.displayNameContainer}>
                 <FormattedText
                     id='post_info.system'
@@ -64,13 +72,23 @@ const SystemHeader = ({isMilitaryTime, createAt, theme, user}: Props) => {
                     testID='post_header.display_name'
                 />
             </View>
-            <FormattedTime
-                timezone={userTimezone!}
-                isMilitaryTime={isMilitaryTime}
-                value={createAt}
-                style={styles.time}
-                testID='post_header.date_time'
-            />
+            <View style={styles.timeContainer}>
+                <FormattedTime
+                    timezone={userTimezone!}
+                    isMilitaryTime={isMilitaryTime}
+                    value={createAt}
+                    style={styles.time}
+                    testID='post_header.date_time'
+                />
+                {isEphemeral && (
+                    <FormattedText
+                        id='post_header.visible_message'
+                        defaultMessage='(Only visible to you)'
+                        style={styles.time}
+                        testID='post_header.visible_message'
+                    />
+                )}
+            </View>
         </View>
     );
 };

assets/base/i18n/en.json

@@ -934,6 +934,7 @@
   "post_body.check_for_out_of_channel_mentions.message.one": "was mentioned but is not in the channel. Would you like to ",
   "post_body.commentedOn": "Commented on {name}{apostrophe} message: ",
   "post_body.deleted": "(message deleted)",
+  "post_header.visible_message": "(Only visible to you)",
   "post_info.auto_responder": "Automatic Reply",
   "post_info.bot": "Bot",
   "post_info.del": "Delete",