Introduce per message timestamps as a configurable option.

_locales/en/messages.json

@@ -198,6 +198,8 @@
   "noteToSelf": "Note to Self",
   "hideMenuBarTitle": "Hide Menu Bar",
   "hideMenuBarDescription": "Toggle system menu bar visibility",
+  "perMessageTimestampsTitle": "Per Message Timestamps",
+  "perMessageTimestampsDescription": "Place timestamp in message bubble instead of between messages",
   "startConversation": "Start New Conversation",
   "invalidNumberError": "Invalid Session ID or ONS Name",
   "failedResolveOns": "Failed to resolve ONS name",

stylesheets/_session_theme.scss

@@ -6,6 +6,13 @@
   background: var(--color-cell-background);
 }
 
+.module-message-clock--incoming {
+  color: var(--color-message-timestamp-text);
+}
+.module-message-clock--outgoing {
+  color: var(--color-message-timestamp-text);
+}
+
 .module-message {
   position: relative;
   display: inline-flex;

ts/components/conversation/MessageClock.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import moment from 'moment';
+
+type Props = {
+  time: number;
+};
+
+export const MessageClock = (props: Props): JSX.Element => {
+  const { time } = props;
+
+  moment.locale('en-gb');
+  return <div style={{ paddingRight: '8px',
+		       paddingLeft: '8px',
+		       paddingBottom: '2px',
+		       fontSize: '0.8em',
+		       float: 'right' }}>
+	   {moment(time).format('LT')}
+	 </div>;
+};

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -28,6 +28,7 @@ import { MessagePreview } from './MessagePreview';
 import { MessageQuote } from './MessageQuote';
 import { MessageText } from './MessageText';
 import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
+import { MessageClock } from '../../MessageClock';
 
 export type MessageContentSelectorProps = Pick<
   MessageRenderingProps,
@@ -212,6 +213,7 @@ export const MessageContent = (props: Props) => {
         rootMargin="500px 0px 500px 0px"
         triggerOnce={false}
       >
+      <div className={`module-message-clock--${direction}`}>
         <IsMessageVisibleContext.Provider value={isMessageVisible}>
           {!isDeleted && (
             <>
@@ -234,6 +236,8 @@ export const MessageContent = (props: Props) => {
             </>
           ) : null}
         </IsMessageVisibleContext.Provider>
+	{window.getSettingValue('per-message-timestamps') && <MessageClock time={timestamp} />}
+	</div>
       </InView>
     </div>
   );

ts/components/conversation/message/message-content/MessageText.tsx

@@ -48,7 +48,7 @@ export const MessageText = (props: Props) => {
     >
       {isDeleted && <SessionIcon iconType="delete" iconSize="small" />}
       <MessageBody
-        text={contents || ''}
+        text={contents}
         disableLinks={multiSelectMode}
         disableJumbomoji={false}
         isGroup={conversationType === 'group'}

ts/components/conversation/message/message-item/DateBreak.tsx

@@ -17,9 +17,20 @@ const DateBreakText = styled.div`
 
 export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => {
   const { timestamp, messageId } = props;
-  const text = moment(timestamp).calendar(undefined, {
-    sameElse: 'llll',
-  });
+  let dateFormat;
+  if (window.getSettingValue('per-message-timestamps')) {
+    dateFormat = {
+      sameDay: '[Today]',
+      lastDay: '[Yesterday]',
+      lastWeek: 'LL',
+      sameElse: 'LL',
+    }
+  } else {
+    dateFormat = {
+      sameElse: 'llll',
+    }
+  }
+  const text = moment(timestamp).calendar(undefined, dateFormat);
 
   return (
     <DateBreakContainer id={`date-break-${messageId}`}>

ts/components/settings/section/CategoryAppearance.tsx

@@ -57,6 +57,11 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null
         ? true
         : window.getSettingValue(SettingsKey.settingsMenuBar);
 
+    const isPerMessageTimestampsActive =
+      window.getSettingValue(SettingsKey.settingsPerMessageTimestamps) === undefined
+        ? true
+        : window.getSettingValue(SettingsKey.settingsPerMessageTimestamps);
+
     const isSpellCheckActive =
       window.getSettingValue(SettingsKey.settingsSpellCheck) === undefined
         ? true
@@ -78,6 +83,15 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null
             active={isHideMenuBarActive}
           />
         )}
+        <SessionToggleWithDescription
+          onClickToggle={() => {
+            window.togglePerMessageTimestamps();
+            forceUpdate();
+          }}
+          title={window.i18n('perMessageTimestampsTitle')}
+          description={window.i18n('perMessageTimestampsDescription')}
+          active={isPerMessageTimestampsActive}
+        />
         <SessionToggleWithDescription
           onClickToggle={() => {
             window.toggleSpellCheck();

ts/data/settings-key.ts

@@ -8,6 +8,8 @@ const settingsLinkPreview = 'link-preview-setting';
 const settingsStartInTray = 'start-in-tray-setting';
 const settingsOpengroupPruning = 'prune-setting';
 
+const settingsPerMessageTimestamps = 'per-message-timestamps';
+
 export const SettingsKey = {
   settingsReadReceipt,
   settingsTypingIndicator,
@@ -17,4 +19,5 @@ export const SettingsKey = {
   settingsLinkPreview,
   settingsStartInTray,
   settingsOpengroupPruning,
+  settingsPerMessageTimestamps
 };

ts/mains/main_renderer.tsx

@@ -133,6 +133,11 @@ Storage.onready(async () => {
       window.setMenuBarVisibility(!value);
     },
 
+    getPerMessageTimestamps: () => Storage.get('per-message-timestamps', true),
+    setPerMessageTimestamps: async (value: boolean) => {
+      await Storage.put('per-message-timestamps', value);
+    },
+
     getSpellCheck: () => Storage.get('spell-check', true),
     setSpellCheck: async (value: boolean) => {
       await Storage.put('spell-check', value);
@@ -291,6 +296,12 @@ async function start() {
     window.Events.setHideMenuBar(!current);
   };
 
+  window.togglePerMessageTimestamps= () => {
+    const currentValue = window.getSettingValue('per-message-timestamps');
+    const newValue = currentValue !== undefined ? !currentValue : true;
+    window.Events.setPerMessageTimestamps(newValue);
+  };
+
   window.toggleSpellCheck = () => {
     const currentValue = window.getSettingValue('spell-check');
     // if undefined, it means 'default' so true. but we have to toggle it, so false

ts/state/ducks/SessionTheme.tsx

@@ -29,6 +29,7 @@ const darkColorSessionBorderColor = borderDarkThemeColor;
 const darkColorRecoveryPhraseBannerBg = '#1f1f1f';
 const darkColorPillDivider = '#353535';
 const darkColorLastSeenIndicator = accentDarkTheme;
+const darkColorMessageTimestampText = '#8e9091';
 const darkColorQuoteBottomBarBg = '#404040';
 const darkColorCellBackground = '#1b1b1b';
 const darkColorReceivedMessageBg = '#2d2d2d';
@@ -94,6 +95,10 @@ export const switchHtmlToDarkTheme = () => {
     '--color-last-seen-indicator',
     darkColorLastSeenIndicator
   );
+  document.documentElement.style.setProperty(
+    '--color-message-timestamp-text',
+    darkColorMessageTimestampText
+  );
   document.documentElement.style.setProperty(
     '--color-quote-bottom-bar-background',
     darkColorQuoteBottomBarBg
@@ -175,6 +180,8 @@ const lightColorSessionBorder = `1px solid ${lightColorSessionBorderColor}`;
 const lightColorRecoveryPhraseBannerBg = white;
 const lightColorPillDivider = `${black}1A`;
 const lightColorLastSeenIndicator = black;
+const lightColorLastSeenIndicatorText = '#070c14';
+const lightColorMessageTimestampText = '#070c14';
 const lightColorQuoteBottomBarBg = '#f0f0f0';
 const lightColorCellBackground = '#f9f9f9';
 const lightColorReceivedMessageBg = '#f5f5f5';
@@ -244,6 +251,14 @@ export const switchHtmlToLightTheme = () => {
     '--color-last-seen-indicator',
     lightColorLastSeenIndicator
   );
+  document.documentElement.style.setProperty(
+    '--color-last-seen-indicator-text',
+    lightColorLastSeenIndicatorText
+  );
+  document.documentElement.style.setProperty(
+    '--color-message-timestamp-text',
+    lightColorMessageTimestampText
+  );
   document.documentElement.style.setProperty(
     '--color-quote-bottom-bar-background',
     lightColorQuoteBottomBarBg
@@ -356,6 +371,8 @@ export const SessionGlobalStyles = createGlobalStyle`
     --color-recovery-phrase-banner-background: ${lightColorRecoveryPhraseBannerBg};
     --color-pill-divider:  ${lightColorPillDivider};
     --color-last-seen-indicator: ${lightColorLastSeenIndicator};
+    --color-last-seen-indicator-text:  ${lightColorLastSeenIndicatorText};
+    --color-message-timestamp-text:  ${lightColorMessageTimestampText};
     --color-quote-bottom-bar-background:  ${lightColorQuoteBottomBarBg};
     --color-cell-background: ${lightColorCellBackground};
     --color-pill-divider-text:  ${lightColorPillDividerText};

ts/state/selectors/conversations.ts

@@ -198,10 +198,15 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
           : sortedMessages[index + 1].propsForMessage.serverTimestamp ||
             sortedMessages[index + 1].propsForMessage.timestamp;
 
+      const hoursPreviousMessage = new Date(previousMessageTimestamp).getHours();
+      const hoursMessage = new Date(messageTimestamp).getHours();
       const showDateBreak =
-        messageTimestamp - previousMessageTimestamp > maxMessagesBetweenTwoDateBreaks * 60 * 1000
-          ? messageTimestamp
-          : undefined;
+	window.getSettingValue('per-message-timestamps')
+	  ? hoursMessage < hoursPreviousMessage ? messageTimestamp : undefined
+	  : messageTimestamp - previousMessageTimestamp >
+	    maxMessagesBetweenTwoDateBreaks * 60 * 1000
+	      ? messageTimestamp
+	      : undefined;
 
       if (msg.propsForDataExtractionNotification) {
         return {

ts/types/LocalizerKeys.ts

@@ -50,6 +50,7 @@ export type LocalizerKeys =
   | 'fileSizeWarning'
   | 'openGroupURL'
   | 'hideMenuBarDescription'
+  | 'perMessageTimestampsDescription'
   | 'pickClosedGroupMember'
   | 'ByUsingThisService...'
   | 'startConversation'
@@ -246,6 +247,7 @@ export type LocalizerKeys =
   | 'setPassword'
   | 'editMenuDeleteContact'
   | 'hideMenuBarTitle'
+  | 'perMessageTimestampsTitle'
   | 'imageCaptionIconAlt'
   | 'sendRecoveryPhraseTitle'
   | 'multipleJoinedTheGroup'

ts/util/accountManager.ts

@@ -168,6 +168,9 @@ async function createAccount(identityKeyPair: any) {
   await Storage.put(SettingsKey.settingsOpengroupPruning, true);
   await window.setOpengroupPruning(true);
 
+  // Enable per-message timestamps by default.
+  await Storage.put(SettingsKey.settingsPerMessageTimestamps, true);
+
   await setLocalPubKey(pubKeyString);
 }
 

ts/window.d.ts

@@ -51,6 +51,7 @@ declare global {
     toggleCallMediaPermissionsTo: (enabled: boolean) => Promise<void>;
     getCallMediaPermissions: () => boolean;
     toggleMenuBar: () => void;
+    togglePerMessageTimestamps: () => void;
     toggleSpellCheck: any;
     setTheme: (newTheme: string) => any;
     isDev?: () => boolean;