Day markers

package-lock.json

@@ -10,6 +10,7 @@
         "aes-js": "^3.1.2",
         "axios": "^0.21.0",
         "core-js": "^3.6.5",
+        "dayjs": "^1.10.3",
         "intersection-observer": "^0.11.0",
         "js-sha256": "^0.9.0",
         "json-web-key": "^0.4.0",
@@ -4711,6 +4712,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.3.tgz",
+      "integrity": "sha512-/2fdLN987N8Ki7Id8BUN2nhuiRyxTLumQnSQf9CNncFCyqFsSKb9TNhzRYcC8K8eJSJOKvbvkImo/MKKhNi4iw=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -18630,6 +18636,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.3.tgz",
+      "integrity": "sha512-/2fdLN987N8Ki7Id8BUN2nhuiRyxTLumQnSQf9CNncFCyqFsSKb9TNhzRYcC8K8eJSJOKvbvkImo/MKKhNi4iw=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
     "aes-js": "^3.1.2",
     "axios": "^0.21.0",
     "core-js": "^3.6.5",
+    "dayjs": "^1.10.3",
     "intersection-observer": "^0.11.0",
     "js-sha256": "^0.9.0",
     "json-web-key": "^0.4.0",

src/assets/css/chat.scss

@@ -383,13 +383,13 @@ $admin-fg: white;
     margin-left: 20px;
     margin-right: 20px;
     height: 1px;
-    width: 100%;
+    width: calc(100% - 40px);
     line-height: var(--v-theme-title-featured-line-height);
     position: absolute;
     bottom: 0;
     font-family: sans-serif;
     font-style: normal;
-    font-weight: bold;
+    font-weight: normal;
     font-size: 8 * $chat-text-size;
     line-height: 140%;
     /* identical to box height, or 14px */
@@ -401,8 +401,38 @@ $admin-fg: white;
         position: absolute;
         top: -4px;
         background: white;
+        transform: translate(-50%,0);
         padding-left: 4px;
         padding-right: 4px;
         content: attr(title);
     }
+}
+
+.day-marker {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    height: 1px;
+    line-height: var(--v-theme-title-featured-line-height);
+    font-family: sans-serif;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 10 * $chat-text-size;
+    line-height: 140%;
+    /* identical to box height, or 14px */
+    letter-spacing: 0.29px;
+    color: black;
+    background-color: black;
+    text-align: center;
+    position: relative;
+    &::after {
+        position: absolute;
+        top: -8px;
+        background: white;
+        transform: translate(-50%,0);
+        padding-left: 10px;
+        padding-right: 10px;
+        content: attr(title);
+    }
 }

src/components/Chat.vue

@@ -29,6 +29,10 @@
       />
 
       <div v-for="(event,index) in events" :key="event.getId()" :eventId="event.getId()">
+       
+       <!-- DAY Marker, shown for every new day in the timeline -->
+        <div v-if="showDayMarkerBeforeEvent(event)" class="day-marker" :title="dayForEvent(event)" />
+        
         <div
           v-if="
             !event.isRelation() && !event.isRedacted() && !event.isRedaction()
@@ -920,6 +924,19 @@ export default {
           }
         }
       }
+    },
+
+    showDayMarkerBeforeEvent(event) {
+      const idx = this.events.indexOf(event);
+      if (idx <= 0) {
+        return true;
+      }
+      const previousEvent = this.events[idx - 1];
+      return util.dayDiff(previousEvent.getTs(), event.getTs()) > 0;
+    },
+
+    dayForEvent(event) {
+      return util.formatDay(event.getTs());
     }
   },
 };

src/plugins/utils.js

@@ -1,9 +1,14 @@
 import axios from 'axios';
 import * as ContentHelpers from "matrix-js-sdk/lib/content-helpers";
+var dayjs = require('dayjs');
 var sha256 = require('js-sha256').sha256;
 var aesjs = require('aes-js');
 var base64Url = require('json-web-key/lib/base64url');
 
+// Install extended localized format
+var localizedFormat = require('dayjs/plugin/localizedFormat')
+dayjs.extend(localizedFormat)
+
 class Util {
     getAttachment(matrixClient, event) {
         return new Promise((resolve, reject) => {
@@ -415,6 +420,32 @@ class Util {
 
         })
     }
+
+    /**
+     * Return number of whole days between the timestamps, at end of that day.
+     * @param {*} ts1 
+     * @param {*} ts2 
+     */
+    dayDiff(ts1, ts2) {
+        var t1 = dayjs(ts1).endOf('day');
+        var t2 = dayjs(ts2).endOf('day');
+        return t2.diff(t1, 'day');
+    }
+
+    formatDay(timestamp) {
+        var then = dayjs(timestamp).endOf('day');
+        var now = dayjs().endOf('day');
+        const dayDiff = now.diff(then, 'day');
+        if (dayDiff < 1) {
+            return "Today";
+        } else if (dayDiff < 2) {
+            return "Yesterday";
+        } else if (dayDiff < 7) {
+            return "" + dayDiff + " days ago";
+        } else {
+            return then.format('L');
+        }
+    }
 }
 export default new Util();