make date dividers reasier to read

src/lib/strformat.js

@@ -16,6 +16,21 @@ export function shortDateFormat(then, locale) {
   return then.toLocaleDateString(locale, {year: 'numeric', month: 'short', day: 'numeric'});
 }
 
+// Representation a date relative to now.
+export function relativeDateFormat(then, locale) {
+  locale = locale || window.navigator.userLanguage || window.navigator.language;
+  const now = new Date();
+  const thenDays = Math.floor((then.getTime() - then.getTimezoneOffset() * 60_000) / 86_400_000);
+  const nowDays = Math.floor((now.getTime() - now.getTimezoneOffset() * 60_000) / 86_400_000);
+  const diff = thenDays - nowDays;
+  if (Math.abs(diff) < 2) {
+    // Today or yesterday.
+    return new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(diff, 'day')
+  }
+  // More than two days: just show the date.
+  return new Intl.DateTimeFormat(locale).format(then);
+}
+
 // Convert seconds to [hours:]minutes:seconds, i.e. 156 sec -> 2:36, 3756 sec -> 1:02:36.
 // If <code>fixedMins</code> is true, then minutes are represented by at least two digits.
 export function secondsToTime(seconds, fixedMin) {

src/views/messages-view.jsx

@@ -25,7 +25,7 @@ import { DEFAULT_P2P_ACCESS_MODE, EDIT_PREVIEW_LENGTH, IMAGE_PREVIEW_DIM, KEYPRE
 import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constants.js';
 import { blobToBase64, fileToBase64, imageScaled, makeImageUrl } from '../lib/blob-helpers.js';
 import HashNavigation from '../lib/navigation.js';
-import { bytesToHumanSize, shortDateFormat } from '../lib/strformat.js';
+import { bytesToHumanSize, relativeDateFormat, shortDateFormat } from '../lib/strformat.js';
 
 // Run timer with this frequency (ms) for checking notification queue.
 const NOTIFICATION_EXEC_INTERVAL = 300;
@@ -1145,7 +1145,6 @@ class MessagesView extends React.Component {
         let previousFrom = null;
         let prevDate = null;
         let chatBoxClass = null;
-        const dateFmt = new Intl.DateTimeFormat(this.props.intl.locale);
         topic.messages((msg, prev, next, i) => {
           let nextFrom = next ? (next.from || 'chan') : null;
 
@@ -1193,7 +1192,7 @@ class MessagesView extends React.Component {
             if (!prevDate || prevDate.toDateString() != thisDate.toDateString()) {
               messageNodes.push(
                 <MetaMessage
-                  date={dateFmt.format(msg.ts)}
+                  date={relativeDateFormat(msg.ts)}
                   locale={this.props.intl.locale}
                   key={'date-' + msg.seq} />
               );