make date dividers reasier to read

css/base.css

@@ -1878,6 +1878,7 @@ video {
   font-size: smaller;
   padding: 0.5rem 0.5rem 0.5rem 0.5rem;
   background-color: rgb(244 244 244 / 66%);
+  text-transform: uppercase;
 }
 
 /* Left triangle placed bottom left flush. */

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} />
               );

umd/index.dev.js

@@ -3136,6 +3136,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "bytesToHumanSize": () => (/* binding */ bytesToHumanSize),
 /* harmony export */   "idToColorClass": () => (/* binding */ idToColorClass),
 /* harmony export */   "letterTileColorId": () => (/* binding */ letterTileColorId),
+/* harmony export */   "relativeDateFormat": () => (/* binding */ relativeDateFormat),
 /* harmony export */   "secondsToTime": () => (/* binding */ secondsToTime),
 /* harmony export */   "shortDateFormat": () => (/* binding */ shortDateFormat),
 /* harmony export */   "shortenFileName": () => (/* binding */ shortenFileName)
@@ -3165,6 +3166,19 @@ function shortDateFormat(then, locale) {
     day: 'numeric'
   });
 }
+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) {
+    return new Intl.RelativeTimeFormat(locale, {
+      numeric: 'auto'
+    }).format(diff, 'day');
+  }
+  return new Intl.DateTimeFormat(locale).format(then);
+}
 function secondsToTime(seconds, fixedMin) {
   let min = Math.floor(seconds / 60) | 0;
   let hours = Math.floor(min / 60) | 0;
@@ -6332,7 +6346,6 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         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;
           let sequence = 'single';
@@ -6372,7 +6385,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
             const thisDate = new Date(msg.ts);
             if (!prevDate || prevDate.toDateString() != thisDate.toDateString()) {
               messageNodes.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_meta_message_jsx__WEBPACK_IMPORTED_MODULE_14__["default"], {
-                date: dateFmt.format(msg.ts),
+                date: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_20__.relativeDateFormat)(msg.ts),
                 locale: this.props.intl.locale,
                 key: 'date-' + msg.seq
               }));