Message Context Menu: Display last edit time (#5176)

src/components/middle/message/LastEditTimeMenuItem.tsx

@@ -0,0 +1,37 @@
+import React, { memo } from '../../../lib/teact/teact';
+
+import type { ApiMessage } from '../../../api/types';
+
+import { formatDateAtTime } from '../../../util/dates/dateFormat';
+
+import useOldLang from '../../../hooks/useOldLang';
+
+import MenuItem from '../../ui/MenuItem';
+import MenuSeparator from '../../ui/MenuSeparator';
+import Skeleton from '../../ui/placeholder/Skeleton';
+
+import styles from './TimeMenuItem.module.scss';
+
+type OwnProps = {
+  message: ApiMessage;
+};
+
+function LastEditTimeMenuItem({
+  message,
+}: OwnProps) {
+  const lang = useOldLang();
+  const { editDate } = message;
+  const shouldRenderSkeleton = !editDate;
+
+  return (
+    <>
+      <MenuSeparator size="thick" />
+      <MenuItem icon="edit" className={styles.item}>
+        {shouldRenderSkeleton ? <Skeleton className={styles.skeleton} /> : Boolean(editDate)
+          && lang('Chat.PrivateMessageEditTimestamp.Date', formatDateAtTime(lang, editDate * 1000))}
+      </MenuItem>
+    </>
+  );
+}
+
+export default memo(LastEditTimeMenuItem);

src/components/middle/message/MessageContextMenu.tsx

@@ -37,6 +37,7 @@ import Menu from '../../ui/Menu';
 import MenuItem from '../../ui/MenuItem';
 import MenuSeparator from '../../ui/MenuSeparator';
 import Skeleton from '../../ui/placeholder/Skeleton';
+import LastEditTimeMenuItem from './LastEditTimeMenuItem';
 import ReactionSelector from './reactions/ReactionSelector';
 import ReadTimeMenuItem from './ReadTimeMenuItem';
 
@@ -234,6 +235,7 @@ const MessageContextMenu: FC<OwnProps> = ({
   const noReactions = !isPrivate && !enabledReactions;
   const withReactions = canShowReactionList && !noReactions;
   const isSponsoredMessage = !('id' in message);
+  const isEdited = ('isEdited' in message) && message.isEdited;
   const messageId = !isSponsoredMessage ? message.id : '';
   const seenByDates = !isSponsoredMessage ? message.seenByDates : undefined;
 
@@ -481,6 +483,11 @@ const MessageContextMenu: FC<OwnProps> = ({
             <MenuItem icon="close-circle" onClick={onSponsoredHide}>{lang('HideAd')}</MenuItem>
           </>
         )}
+        {isEdited && (
+          <LastEditTimeMenuItem
+            message={message}
+          />
+        )}
         {(canShowSeenBy || canShowReactionsCount) && !isSponsoredMessage && (
           <>
             <MenuSeparator size={hasCustomEmoji ? 'thin' : 'thick'} />

src/components/middle/message/ReadTimeMenuItem.tsx

@@ -12,7 +12,7 @@ import MenuSeparator from '../../ui/MenuSeparator';
 import Skeleton from '../../ui/placeholder/Skeleton';
 import Transition from '../../ui/Transition';
 
-import styles from './ReadTimeMenuItem.module.scss';
+import styles from './TimeMenuItem.module.scss';
 
 type OwnProps = {
   message: ApiMessage;

src/config.ts

@@ -51,7 +51,7 @@ export const MEDIA_PROGRESSIVE_CACHE_DISABLED = false;
 export const MEDIA_PROGRESSIVE_CACHE_NAME = 'tt-media-progressive';
 export const MEDIA_CACHE_MAX_BYTES = 512 * 1024; // 512 KB
 export const CUSTOM_BG_CACHE_NAME = 'tt-custom-bg';
-export const LANG_CACHE_NAME = 'tt-lang-packs-v43';
+export const LANG_CACHE_NAME = 'tt-lang-packs-v44';
 export const ASSET_CACHE_NAME = 'tt-assets';
 export const AUTODOWNLOAD_FILESIZE_MB_LIMITS = [1, 5, 10, 50, 100, 500];
 export const DATA_BROADCAST_CHANNEL_NAME = 'tt-global';